js轮播图

来源：互联网发布：淘宝投诉电话是多少呢编辑：程序博客网时间：2024/06/06 15:01
<!DOCTYPE html><html><head lang="en"><meta charset="UTF-8"><title>原生js轮播图切换代码</title><style>   *{margin: 0;  padding: 0;  list-style:none;  }   a,img{border:0;}   #cont{position: relative;  width: 730px;  height: 454px;  margin:40px auto 0 auto  }   .imm a{position: absolute}   .btn ul {position: absolute;  z-index: 10000;  bottom: 40px;  right: 20px;  }   .btn ul li{width: 20px;  height: 20px;  background-color: #cccccc;  border-radius: 50%;  list-style: none;      float: left;  margin: 0 5px;  text-align: center;  color: white;  line-height: 20px;  cursor: pointer;  }   .btn ul li.on{  background-color: aquamarine;  }   /*.diin{width: 100%;  height: 30px;  background-color: black;  opacity: 0.5;  position: absolute;  bottom: 0;*/      /*color: white;  z-index: 10000;  }*/   #jiao{display: none;  }   #left{width: 35px;  height: 50px;  background-color: #555555;  opacity: 0.6;  z-index: 9999;  display: block;      position: absolute;  top: 50%;  left: 20px;  color: white;  font-size: 20px;  line-height: 50px;  text-align: center;      text-decoration: none; }     #right{  width: 35px;  height: 50px;  background-color: #555555;  opacity: 0.6;  z-index: 9999;  display: block;      position: absolute;  top: 50%;  right: 20px;  color: white;  font-size: 20px;  line-height: 50px;      text-align: center;  text-decoration: none;  }</style></head><body><div id="cont"><div class="lii"></div><div class="btn" id="btn">   <ul>      <li class="on">1</li>      <li>2</li>      <li>3</li>      <li>4</li>      <div style="clear: both"></div>   </ul></div><div class="imm" id="imm">   <a href="1" target="_blank"> <img src="images/j1.jpg" alt="第一章"></a>   <a href="2" target="_blank"> <img src="images/j2.jpg" alt="第二章"></a>   <a href="3" target="_blank"> <img src="images/j3.jpg" alt="第三章"></a>   <a href="4" target="_blank"><img src="images/j4.jpg" alt="第四章"></a></div><div id="jiao">   <a href="#" id="left">&lt;</a>   <a href="#" id="right">&gt;</a></div></div><script>var tt=null;var kkk;var n=0;var timer=0;window.onload=function(){   var li=document.getElementById("btn").getElementsByTagName("li");   kkk=document.getElementById("imm").getElementsByTagName("a");   for(var i=0;i<kkk.length;i++){      if(i!=0){         kkk[i].style.opacity=0;      }   }   for(var j=0;j<li.length;j++){         li[j].onmouseover=function(){            var that=this;            tt=setTimeout(function(){ var index=that.innerHTML-1;               n=index;               if(index <kkk.length){                  for(var o=0;o<li.length;o++){                     li[o].className="";                     kkk[o].style.opacity=0;                     kkk[o].style.zIndex=9998;                  }                  that.className="on";                  kkk[index].style.opacity=1;                  kkk[index].style.zIndex=9999;                  kkk[index].style.transition="opacity 0.8s";                  leftf(-300,0,kkk[index]);               }            },100);         };      li[j].onmouseout=function(){         clearTimeout(tt)      }      }   var left=document.getElementById("left");   var right=document.getElementById("right");   var jiao=document.getElementById("jiao");   var body=document.getElementById("cont");   timer = setInterval("autoplay()",2000);   body.onmouseover=function(){      jiao.style.display="block";      clearInterval(timer);   };   body.onmouseout=function(){      jiao.style.display="none";      timer = setInterval("autoplay()",2000);   };   left.onclick=function(){      if(n>0){         n--      }else if(n==0){         n=kkk.length-1;      }      var li=document.getElementById("btn").getElementsByTagName("li");      li[n].onmouseover()   };   right.onclick=function(){      n=n>=(kkk.length-1)?0:++n;      var li=document.getElementById("btn").getElementsByTagName("li");      li[n].onmouseover()   }};function leftf(start,end,ele){ var tt=setInterval(function (){   start+=10;   ele.style.left=start+"px";   if(start==end){      clearInterval(tt)   }         },20)}function autoplay(){   n=n>=(kkk.length-1)?0:++n;   var li=document.getElementById("btn").getElementsByTagName("li");   li[n].onmouseover()};</script></body></html>
阅读全文
2 0