为了账号安全,请及时绑定邮箱和手机立即绑定

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

/ 猿问

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

秃了也强了 2018-03-23 10:30:02

<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();


查看完整描述

5 回答

?
一人我编程累

你快速点击的时候  速度才会变快  就是因为  上个定时器还没有执行完   下个定时器就又开始了了

你可以 定义一个全局变量   来记录定时器是否执行完   eg:var sign=false;

查看完整回答
反对 回复 2018-03-26
?
一人我编程累
  1. 定时器在执行前也要清除clearInterval(timer);

  2. 在上一个定时器没有执行完的时候,不能让新的定时器执行,否则定时累加,速度会越来越快(一个执行完就清除)

  3. 思路给你了 自己去做  你的代码有点乱  懒得看 

查看完整回答
反对 回复 2018-03-26
?
Weber

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

查看完整回答
反对 回复 2018-03-23
?
荼酒

代码太乱, 看的太累。 

建议使用chrome浏览器进行调试。

查看完整回答
反对 回复 2018-03-23
?
秃了也强了

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

查看完整回答
反对 回复 2018-03-23

添加回答

回复

举报

0/150
提交
取消
意见反馈 邀请有奖 帮助中心 APP下载
官方微信