js实现图片切换轮播终极版

来源：互联网发布：个人简历java项目编辑：程序博客网时间：2024/06/05 08:48
js实现图片切换轮播终极版
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gbk" /><title></title></head><body onload="rollImg()"><div style="position:relative;width:320px;height:479px" id="container">    <div onmouseover="stop()" onmouseout="rollImg()" style="position:absolute; top:0px; left:0px;display:block;" id="con0"><img src="1.jpg" width="320" height="479" /></div>        <div onmouseover="stop()" onmouseout="rollImg()" style="position:absolute; top:0px; left:0px;display:none;" id="con1"> <img src="2.jpg" width="320" height="479" /></div>        <div onmouseover="stop()" onmouseout="rollImg()" style="position:absolute; top:0px; left:0px;display:none;" id="con2"><img src="3.jpg" width="320" height="479" /></div>    <div onmouseover="stop()" onmouseout="rollImg()" style="position:absolute; top:0px; left:0px;display:none;" id="con3"><img src="4.jpg" width="320" height="479" /></div>        <div onmouseover="stop()" onmouseout="rollImg()" style="position:absolute; top:0px; left:0px;display:none;" id="con4"> <img src="5.jpg" width="320" height="479" /></div>        <div onmouseover="stop()" onmouseout="rollImg()" style="position:absolute; top:0px; left:0px;display:none;" id="con5"><img src="6.jpg" width="320" height="479" /></div></div><div id="nav" style="position:absolute;top:460px;left:180px"><div id="nav0" onmouseover="showImg(1)" style="cursor:pointer; margin-left:3px;  float:left;width:20px;height:20px;background-color:green;color:red;text-align:center;">1 </div><div id="nav1" onmouseover="showImg(2)" style="cursor:pointer; margin-left:3px;  float:left;width:20px;height:20px;background-color:blue;color:red;text-align:center;">2 </div><div id="nav2" onmouseover="showImg(3)" style="cursor:pointer; margin-left:3px;  float:left;width:20px;height:20px;background-color:blue;color:red;text-align:center;">3 </div><div id="nav3" onmouseover="showImg(4)" style="cursor:pointer; margin-left:3px;  float:left;width:20px;height:20px;background-color:blue;color:red;text-align:center;">4 </div><div id="nav4" onmouseover="showImg(5)" style="cursor:pointer; margin-left:3px;  float:left;width:20px;height:20px;background-color:blue;color:red;text-align:center;">5 </div><div id="nav5" onmouseover="showImg(6)" style="cursor:pointer; margin-left:3px;  float:left;width:20px;height:20px;background-color:blue;color:red;text-align:center;">6 </div></div></body></html><script>//创建装imgDiv的数组var imgDivs=[];//创建装下面导航的Div的数组var navDivs=[];var showId=1;for(var i =0;i<6;i++){//分别通过id获取对象  装入对应数组var imgDiv=document.getElementById("con"+i);var navDiv=document.getElementById("nav"+i);imgDivs.push(imgDiv);navDivs.push(navDiv);}function showImg(navId){//当是rollImg 调用时  是undefined  不进if//当时我们导航过来时  是1-6   为true  进ifif(navId){showId=navId-1;  //更改showId 显示具体哪张图stop();  //停止轮询}for(var i =0;i<imgDivs.length;i++){if(showId==i){imgDivs[i].style.display="block";//设置显示图片navDivs[i].style.backgroundColor="green";//设置导航的背景颜色 对应显示图片}else{imgDivs[i].style.display="none";//设置不显示图片navDivs[i].style.backgroundColor="blue";}}//控制showId  不能超过5   因为下标最多为5++showId;if(showId==6){showId=0;}}//设置轮询function rollImg(){num=setInterval(function(){showImg();},2000);}//消除轮询function stop(){clearInterval(num);}</script>
0 0