淡入淡出輪播圖
用原生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"
}
淡入淡出輪播圖