各位老师，为什么我用jq写的轮播图，移入移出速度会加快

Question

<div id="slider">

    <ul id="imgs">

    </ul>

<ul id="indexs">

</ul>

</div>

-----------------------------------------以上是html

-----------------------------------------以下是js

/*广告图片数组*/

var imgs=[

    {"i":0,"img":"images/index/banner_01.jpg"},

{"i":1,"img":"images/index/banner_02.jpg"},

{"i":2,"img":"images/index/banner_03.jpg"},

{"i":3,"img":"images/index/banner_04.jpg"},

{"i":4,"img":"images/index/banner_05.jpg"},

];

var slider={

DURATION:500,//单次移动时间

WAIT:1000,//单次等待时间

moved:0,//已经左移的个数

LIWIDTH:670,//保存每个li的宽度

$ulImgs:null,//id为imgs的ul

$ulIndex:null,//小圆点的ul

init(){

var me=this;

me.$ulImgs=$("#imgs");

me.$ulIndex=$("#indexs");

me.initView();

me.autoMoved();

// $("#slider").hover(function(){

//     me.$ulImgs.stop(true);

// },function(){

//     me.autoMoved();    

// });

me.$ulImgs.on("mouseenter","li>img",function(e){

me.$ulImgs.stop(true);

var $str=$(e.target);

var i=$str.index("#imgs img");

me.moved=i;

me.$ulImgs.css("left",-me.moved*me.LIWIDTH);

me.changehover();

});

me.$ulImgs.on("mouseleave","li>img",function(e){

me.autoMoved();

});

me.$ulIndex.on("mouseover","li",function(e){

var $num=$(e.target);

if(!$num.is(".hover")){

me.moved=$num.index("#indexs>li");

console.log(me.moved);

me.$ulImgs.stop(true).animate({

left:-me.moved*me.LIWIDTH},me.DURATION);

me.changehover();

}

})

},

initView(){

for(var i=0 ,htmlImgs="", htmlIndex="";i<imgs.length;i++){

htmlImgs+=`<li><img src='${imgs[i].img}'></li>`;

htmlIndex+=`<li>${i+1}</li>`

}

this.$ulImgs.html(htmlImgs);

this.$ulImgs.append(this.$ulImgs.children(":first").clone()).css("width",this.LIWIDTH*(imgs.length+1));

this.$ulIndex.html(htmlIndex);

this.$ulIndex.children(":first").addClass("hover");

},

autoMoved(){

var me=this;

me.moved++;

me.$ulImgs.delay(me.WAIT).animate({

left:-me.moved*me.LIWIDTH

},me.DURATION,function(){

if(me.moved==imgs.length){

me.$ulImgs.css("left",0);

me.moved=0;

}

console.log(me.DURATION);

me.changehover();

me.autoMoved();

});

},

changehover(){

this.$ulIndex.children().eq(this.moved).addClass("hover")

.siblings().removeClass("hover");

}

}

slider.init();

Answer 1

你快速点击的时候  速度才会变快  就是因为  上个定时器还没有执行完   下个定时器就又开始了了你可以 定义一个全局变量   来记录定时器是否执行完   eg:var sign=false;

Answer 2

想必应该是你移入时没有清除定时器，所以你快速移入时，定时器一直在累加

Answer 3

代码太乱， 看的太累。 建议使用chrome浏览器进行调试。

Answer 4

我是指鼠标快速移入移出轮播图后，轮博速度会变快