-----------------------------------------以上是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();