js实现轮播图

来源：互联网发布：js 数组重新排序编辑：程序博客网时间：2024/05/21 17:35
js实现轮播图
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>js轮播</title><style type="text/css">body{overflow-x:hidden; }div{margin: 0 auto;}.lunboImg{position: relative;width: 1200px;border: 1px solid red;height: 500px;}img{position: relative;}ul{position: absolute;list-style: none;}.lunboContro  li{float:left;margin-left: 35px}.lunboContro{position: relative;left: 500px;top:-60px;}li div{width: 26px;background-color:white;height: 26px;border:1px solid red;border-radius: 15px}</style><script type="text/javascript">   window.onload=function(){   var lis=document.getElementsByTagName("li");   var pic=document.getElementById("pic");   for (var i = 0; i < lis.length; i++) {   /*鼠标经过触发*/   lis[i].onmouseover=function(){   clearInterval(t);for(i=0;i<lis.length;i++){if(lis[i]!=this){lis[i].childNodes[0].style.backgroundColor="white";}} if(this.value==4){ this.childNodes[0].style.backgroundColor="red"; pic.src="../img/banner_img04.jpg"; } if(this.value==3){  this.childNodes[0].style.backgroundColor="red"; pic.src="../img/banner_img03.jpg"; } if(this.value==2){ this.childNodes[0].style.backgroundColor="red"; pic.src="../img/banner_img02.jpg"; } if(this.value==1){ this.childNodes[0].style.backgroundColor="red"; pic.src="../img/banner_img01.jpg"; }    }   /*鼠标离开触发*/   lis[i].onmouseout=function(){        num=this.value; t=setInterval(function(){  // alert(num);   pic.src="../img/banner_img0"+num+".jpg";   for(var i=0;i<lis.length;i++){   if(num==lis[i].value){   lis[i].childNodes[0].style.backgroundColor="red";   }else{   lis[i].childNodes[0].style.backgroundColor="white";   }   }   num++;   if(num==5){ num=1; }   }, 2000);  this.childNodes[0].style.backgroundColor="red";   }    /*点击鼠标触发*/ lis[i].onclick=function(){ if(this.value==4){ pic.src="../img/banner_img04.jpg"; } if(this.value==3){ pic.src="../img/banner_img03.jpg"; } if(this.value==2){ pic.src="../img/banner_img02.jpg"; } if(this.value==1){ pic.src="../img/banner_img01.jpg"; } }}     /*设置定时器，每2s换图*/    num=1;   var t=setInterval(function(){  // alert(num);   pic.src="../img/banner_img0"+num+".jpg";   for(var i=0;i<lis.length;i++){   if(num==lis[i].value){   lis[i].childNodes[0].style.backgroundColor="red";   }else{   lis[i].childNodes[0].style.backgroundColor="white";   }   }   num++;   if(num==5){ num=1; }   }, 2000);    }</script></head><body><div style="width: 100%;height: 600px; border: 1px solid blue"  > <div class="lunboImg" >          <img alt="" src="../img/banner_img01.jpg" width="100%" height="100%" id="pic">  </div>  <div class="lunboContro">      <ul type="circle">         <li value="1"><div style="background-color: red"></div></li>         <li value="2"><div></div></li>         <li value="3"><div></div></li>         <li value="4"><div></div></li>      </ul> </div></div></body></html>
阅读全文
0 1