Home Article Practice 轮播图

轮播图

2022-04-22 23:37  views:475  source:1314520    

window.onload=function() {
var oBox1=document.getElementById("box1");
var oImgs=document.getElementById("imgs");
var oLeft=document.getElementById("left");
var oRight=document.getElementById("right");
var oLiArr=document.getElementsByTagName("li");
var num=1;
oLiArr[0].style.backgroundColor="red";
var timer=setInterval(run1, 2000);
function run1(){
num++;
accoord()
}
function accoord(){
if(num==9){
num=1;
} else if(num==0){
num=8;
}
oImgs.src="img/faa/"+num+".jpg";
for(var i=0;i <oLiArr.length; i++){
oLiArr[i].style.backgroundColor="gray";
}
oLiArr[num-1].style.backgroundColor="red";
}
oBox1.addEventListener("mouseover", stopFunc, false);
function stopFunc(){
clearInterval(timer);
oLeft.style.display="block";
oRight.style.display="block";
}
oBox1.addEventListener("mouseout", startFunc, false);
function startFunc(){
timer=setInterval(run1, 2000);
oLeft.style.display="none";
oRight.style.display="none";
}
oLeft.addEventListener("mouseover", pageFunc, false);
oRight.addEventListener("mouseover", pageFunc, false);
function pageFunc(){
clearInterval(timer);
this.style.backgroundColor="rgba(0,0,0,0.6)";
}
oLeft.addEventListener("mouseout", noPageFunc, false);
oRight.addEventListener("mouseout", noPageFunc, false);
function noPageFunc(){
this.style.backgroundColor="rgba(0,0,0,0.2)";
}
oLeft.addEventListener("click", function(){
num--;
accoord();
}, false);
oRight.addEventListener("click", function(){
num++;
accoord();
}, false);
for (var i=0; i< oLiArr.length; i++){
oLiArr[i].index=i+1;
oLiArr[i].addEventListener("mouseover", function(){
clearInterval(timer);
num=this.index;
accoord();
}, false);
}
}



Disclaimer: The above articles are added by users themselves and are only for typing and communication purposes. They do not represent the views of this website, and this website does not assume any legal responsibility. This statement is hereby made! If there is any infringement of your rights, please contact us promptly to delete it.

字符:    改为:
去打字就可以设置个性皮肤啦!(O ^ ~ ^ O)