<div id="slider">????<ul id="imgs">????</ul><ul id="indexs"></ul></div>-----------------------------------------以上是html-----------------------------------------以下是js/*廣告圖片數(shù)組*/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,//已經(jīng)左移的個數(shù)LIWIDTH:670,//保存每個li的寬度$ulImgs:null,//id為imgs的ul$ulIndex:null,//小圓點的ulinit(){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();
各位老師,為什么我用jq寫的輪播圖,移入移出速度會加快
禿了也強了
2018-03-23 10:30:02