猿问

JS大神帮忙看下轮播图如何 鼠标悬停停止轮播,移开继续轮播

如果不对请大神帮忙写一段完整的 

HTML:

<div class="wrp" >

  <div class="banner" id="slide">

    <ul id="picList">

      <li class="slide_li first">

        <div class="imgBg_home"></div>

        <img class="slide_img" width="100%" src="../../../../../Public/Home/images/index/slide_simple_bg.jpg" /> </li>

      <li class="slide_li">

        <div class="imgBg_air"></div>

        <img class="slide_img airTop" width="100%" src="../../../../../Public/Home/images/index/slide_simple_bg2.jpg" /> 

       </li>

      <li class="slide_li">

        <div class="imgBg_work"></div>

        <img class="slide_img" width="100%" src="../../../../../Public/Home/images/index/slide_simple_bg3.jpg" /> </li>

         <li class="slide_li">

        <div class="imgBg_work"></div>

        <img class="slide_img" width="100%" src="../../../../../Public/Home/images/index/slide_simple_bg4.jpg" /> </li>

    </ul>

    <div id="slideThumb" style="width: 91px;">

    <span class="slideNum active"></span>

    <span class="slideNum"></span>

    <span class="slideNum"></span>

    <span class="slideNum"></span>

    </div>

  </div>

</div>





                          JS:

var jq = $;

$(document).ready(

    function () {

        /*创建幻灯片开始*/

        var s = new slide();

        s.urls = ['images/home.png', 'images/air.png', 'images/work.png'];//banner图片链接

        s.playTime = 4000;

        s.duration = 800;

        s.easing = "easeInOutQuad";

        s.clickEasing = "easeOutCubic";

        try {

            s.play();

        } catch (e) {

        }

        /*创建幻灯片结束*/

    }

);


/*幻灯片*/

function slide(urls, playTime, duration, easing, clickEasing) {

    var direction = "left";

    var flag = false;

    var prev = 2, num = 0, next = 1;

    var picList = jq("#picList");

    var slide_li = jq('.slide_li');

    var slide_img = jq('.slide_img');

    var thumb = jq("#slideThumb");

    var slideNum, size, tmpnum;

    var _this = this;

    var w;

    _this.urls = urls;//banner图片链接

    _this.playTime = playTime;//设置切换秒数

    _this.duration = duration;//设置滑动延迟秒数

    _this.easing = easing;//滑动效果

    _this.clickEasing = clickEasing;//点击时滑动效果



    /*自动设置切换按钮*/

    function setThumb() {

        size = picList.find("li").length;

        //var links = jq("#picList li img:first");

        var sb = new stringBuffer();

        sb.clear();

        for (var i = 1; i <= size; i++) {

            sb.append("<span class=\"slideNum\"></span>");

        }

        thumb.html(sb.toString());

        slideNum = thumb.find(".slideNum");

        num = (slideNum.width() + parseInt(slideNum.css("margin-right")) + 2) * size + 1;

        slideNum.eq(0).addClass("active");

    }


    //幻灯基本大小设置

    function slideLi(){

        w = $('#slide').width();

        slide_li.width(w);

    }


    function titleBar() {

        thumb.width(num + 2);

        jq("#titleBar .slideNum:first").addClass("active");

    }


    //自动播放

    function autoPlay() {

        flag = setInterval

            (

                function () {

                    num = jq("#slideThumb").find(".active").index("#slideThumb .slideNum");

                    if (num == (size - 1)) {

                        num = 0;

                        next = 1;

                        prev = 2;

                    }

                    else {

                        num++;

                        next = (num + 1)%3;

                        prev = (next + 1)%3;

                    }

                    //slide_li.eq(num).fadeIn(_this.duration).siblings().hide();

                    //picList.stop().animate({"margin-left":0 - num * w},{duration:_this.duration, easing:_this.easing});

                    slide_li.eq(prev).siblings().css({'left':0 + w});

                    slide_li.eq(prev).stop().animate({'left':0 - w},_this.duration,function(){

                        $(this).removeClass('.sActive').css({'left':0 + w});

                    });

                    slide_li.eq(num).stop().animate({'left':0},_this.duration);

                    slideNum.removeClass("active").eq(num).addClass("active");

                }, _this.playTime

            );

    }


    //点击事件

    function slideEvent() {

        slideNum.click

            (

                function () {

                    var thisNum = jq(this).index("#slideThumb .slideNum");

                    //slide_li.eq(thisNum).fadeIn(_this.duration).siblings().hide();

                    //picList.stop().animate({"margin-left":0 - jq(this).index("#slideThumb .slideNum") * w},{duration:_this.duration, easing:_this.clickEasing});

                    if(thisNum != num){

                        slide_li.stop();

                        slideNum.removeClass("active").eq(thisNum).addClass("active");

                        slide_li.eq(prev).css({'left':0 + w});

                        slide_li.eq(num).animate({'left':0 - w},_this.duration,function(){

                            if(thisNum == 2){

                                slide_li.eq(0).css({'left':0 + w})

                            }else{

                                $(this).next().css({'left':0 + w})

                            }

                        });

                        slide_li.eq(thisNum).css({'left':0 + w,'z-index':5}).animate({'left':0},_this.duration,function(){

                            slide_li.eq(thisNum).css({'z-index':1}).siblings().css({'left':0 + w});

                        });

                        num = thisNum;

                        next = (num + 1)%3;

                        prev = (next + 1)%3;

                    }else{return false}

                }

            );     

    }


    this.play = function () {

        setThumb();

        titleBar();

autoPlay();

        slideLi();

slideEvent();

if ($.browser.msie && ($.browser.version == "6.0") && !$.support.style) {

$('.airBottom').attr('src', 'style/images/blank.gif').get(0).runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='style/images/airBottom.png',sizingMethod='scale')";

}//修复ie6图片透明

        slide_li.eq(0).removeClass('first').siblings().css({'left':0 + w});

        num = 0;

    }


    //窗口大小变化

    $(window).resize(slideLi);

}


//StringBuffer功能,用于拼接字符串

function stringBuffer() {

    this._strings = new Array();

}

stringBuffer.prototype.append = function (str) {

    this._strings.push(str);

}

stringBuffer.prototype.toString = function () {

    return this._strings.join("");

}

stringBuffer.prototype.clear = function () {

    this._strings = [];

}





qq_妈媳妇儿跑了_0
浏览 7414回答 1
1回答

初雪2

你给ul一个hover事件,设置移入flag为null,移除再开就可以了
随时随地看视频慕课网APP
我要回答