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

-----------------------------------------以上是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

htmlImgs+=`

%24%7Bimgs%5Bi%5D.img%7D`;

htmlIndex+=`

${i+1}`

}

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

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值