-----------------------------------------以上是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+=`

`;

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