Javascript 京東輪播圖
阿新 • • 發佈：2018-07-10
height line tran click doc nload eight cti dex
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="Author" content=""> <meta name="Keywords" content="京東，輪播"> <meta name="Description" content="京東首頁輪播圖"> <title>京東</title> <style> * { padding: 0; margin: 0; } li { list-style: none; } #flash { margin: 100px auto; width: 590px; height: 470px; overflow: hidden; position: relative; } #pic li{ position: absolute; left: 0; top: 0; display: none; } #doc { width: 100px; height: 26px; background-color: rgba(0,0,0,0.7); position: absolute; bottom: 10px; left: 50%; transform: translate(-50%); border-radius: 15px; } #doc li { width: 15px; height: 15px; border-radius: 50%; background-color: rgba(255,255,255,0.9); float: left; margin: 5px 9px; } #doc .on { background-color: red; } #btn li { width: 28px; height: 28px; border-radius: 50%; background-color: rgba(0,0,0,0.7); position: absolute; top: 50%; transform: translateY(-50%); text-align: center; line-height: 28px; color: #fff; font-weight: 700; display: none; } #prev { left: 10px; } #next { right: 10px; } #flash:hover #btn li{ display: block; } #flash:hover,#btn li:hover,#doc li:hover { cursor: pointer; } </style> </head> <body> <div id="flash"> <ul id="pic"> <li style="display: block;"><img src="images/1531057087.jpg" alt="京東"></li> <li><img src="images/1531057087(1).jpg" alt="京東"></li> <li><img src="images/1531057087(2).jpg" alt="京東"></li> </ul> <ul id="doc"> <li class="on"></li> <li></li> <li></li> </ul> <ul id="btn"> <li id="prev"><</li> <li id="next">></li> </ul> </div> <script> window.onload=function(){ var flash=document.getElementById("flash"); var pic=document.getElementById("pic"); var p_lis=pic.getElementsByTagName("li"); var doc=document.getElementById("doc"); var d_lis=doc.getElementsByTagName("li"); var timer=null; var index=0; var left=document.getElementById("prev"); var right=document.getElementById("next"); //設置定時器 timer=setInterval(run, 2000); //自動放 function run(){ index++; if(index>=p_lis.length) {index=0;} changeImage(index); } flash.onmouseover=function() { clearInterval(timer); } flash.onmouseout=function() { timer=setInterval(run,2000); } for (var i = 0; i <d_lis.length; i++) { d_lis[i].id=i; //鼠標在小圓點上 d_lis[i].onmouseover=function(){ clearInterval(timer); changeImage(this.id); } } left.onclick=function() { index--; if(index<0){ index=p_lis.length-1; } changeImage(index); } right.onclick=function() { index++; if(index>p_lis.length-1){ index=0; } changeImage(index); } function changeImage(currindex){ for (var i = 0; i < p_lis.length; i++) { p_lis[i].style.display="none"; d_lis[i].className=""; } p_lis[currindex].style.display="block"; d_lis[currindex].className="on"; // index=currindex; } } </script> </body> </html>
Javascript 京東輪播圖