淡入淡出轮播图

Posted 2021-01-01 luxinyi

用原生js写淡入淡出轮播图

1、轮播图下边的按钮

for(var i =0;i<aBtn.length;i++){
aBtn[i].index = i;
aBtn[i].onmouseover = function(){
for(var j =0;j<aBtn.length;j++){
aBtn[j].className = "";
}
this.className = "active";
next = this.index;
toImg()
}
}

2、轮播图右边的按钮
aDir[0].onclick = function(){
if(next == 0){
next = aLi.length-1;
}else{
next --;
}
toImg()
}

3、轮播图右边的按钮
aDir[1].onclick = function(){
if(next == aLi.length-1){
next = 0;
}else{
next ++;
}
toImg()
}

4、当鼠标移动到轮播图上的时候，运动停止，清除定时器
oBanner.onmouseover = function(){
clearInterval(timer);
}

5、当鼠标移出轮播图的时候，运动继续
oBanner.onmouseout = function(){
autoPlay()
}
autoPlay()

6、定义定时器，开始进行轮播
function autoPlay(){
timer = setInterval(function(){
if(next == aLi.length-1){
next = 0;
}else{
next ++;
}
toImg()
},3000)
}

7、定义定时器，li通过透明度叠加来进行轮播转换
function toImg(){
move(aLi[iNow],{opacity:0});
move(aLi[next],{opacity:100});
iNow = next;
for(var i =0;i<aBtn.length;i++){
aBtn[i].className = ""
}
aBtn[next].className = "active"
}