本文實例為大家分享了js輪播圖實現代碼，供大家參考，具體內容如下
思路：
1、首先要有個盛放圖片的容器，設置為單幅圖片的寬高，且overflow：hidden，這樣保證每次可以只顯示一個圖片
2、Container內有個放圖片的list進行position的定位 ，其中的圖片采用float的方式，同時當圖片進行輪播時，改變list的Left值使得其顯示的圖片發生變化。
3、圖片的輪播使用定時器，通過定時器改變list的Left值是的圖片循環展示
4、當鼠標滑動到圖片上時，清除定時器，圖片停止輪播，當鼠標移出時繼續進行輪播
5、圖片上有一組小圓點用于與當前顯示的圖片相對應，同時可以通過點擊的方式查看對應的圖片
6、圖片可以通過點擊進行左右滑動顯示
代碼：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>輪播圖</title> <style type="text/css"> .container{ margin:0 auto; width:600px; height:400px; position: relative; overflow: hidden; border:4px solid gray; box-shadow: 3px 3px 5px gray; border-radius:10px; } .list{ width:4200px; height:400px; position: absolute; top:0px; } img{ float:left; width:600px; height:400px; } .dots{ position: absolute; left:40%; bottom:30px; list-style: none; } .dots li{ float:left; width:8px; height:8px; border-radius: 50%; background: gray; margin-left:5px } .dots .active{ background: white; } .pre,.next{ position: absolute; top:40%; font-size:40px; color:white; text-align:center; background: rgba(128,128,128,0.5); /* display:none;*/ } .pre{ left:30px; } .next{ right:30px; } </style></head><body> <div class="container"> <div class="list" style=" left:-600px;"> <img src="img/5.jpg"> <img src="img/1.jpg"> <img src="img/2.jpg"> <img src="img/3.jpg"> <img src="img/4.jpg"> <img src="img/5.jpg"> <img src="img/1.jpg"> </div> <ul class="dots"> <li index=1 class="active dot"></li> <li index=2 class="dot"></li> <li index=3 class="dot"></li> <li index=4 class="dot"></li> <li index=5 class="dot"></li> </ul> <div class="pre"><</div> <div class="next">></div> </div><script type="text/javascript"> var index=1,timer; function init(){ eventBind(); autoPlay(); } init(); function autoPlay(){ timer =setInterval(function () { animation(-600); dotIndex(true); },1000) } function stopAutoPlay() { clearInterval(timer); } function dotIndex(add){ if(add){ index++; } else{ index--; } if(index>5){ index = 1; } if(index<1){ index = 5; } dotActive(); } function dotActive() { var dots = document.getElementsByClassName("dot"); var len = dots.length; for(var i=0 ;i<len ;i++){ dots[i].className = "dot"; } for(var i=0;i<len;i++){ /*此處可以不用parseInt，當不用全等時*/ if(index === parseInt(dots[i].getAttribute("index"))){ dots[i].className = "dot active"; } } } function eventBind(){ /*點的點擊事件*/ var dots = document.getElementsByClassName("dot"); var len = dots.length; for(var i=0;i<len;i++){ (function(j){ dots[j].onclick = function(e){ var ind = parseInt(dots[j].getAttribute("index")); animation((index - ind)*(-600));/*顯示點擊的圖片*/ index = ind; dotActive(); } })(i) } /*容器的hover事件*/ var con = document.getElementsByClassName("container")[0]; /*鼠標移動到容器上時，停止制動滑動，離開時繼續滾動*/ con.onmouseover = function (e) { stopAutoPlay(); } con.onmouseout =function(e){ autoPlay(); } /*箭頭事件的綁定*/ var pre = document.getElementsByClassName("pre")[0]; var next = document.getElementsByClassName("next")[0]; pre.onclick = function (e) { dotIndex(false); animation(600); } next.onclick = function (e) { dotIndex(true); animation(-600); } } function animation(offset){ var lists = document.getElementsByClassName("list")[0]; var left = parseInt(lists.style.left.slice(0,lists.style.left.indexOf("p"))) + offset; if(left<-3000){ lists.style.left = "-600px"; } else if(left>-600){ lists.style.left = "-3000px"; } else{ lists.style.left = left+"px"; } }</script></body></html>以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
