快捷導(dǎo)航

JS輪播圖實現(xiàn)簡單代碼

更新時間：2021年02月19日 10:17:51 作者：My-Lady

這篇文章主要為大家詳細介紹了JS輪播圖實現(xiàn)簡單代碼，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了js輪播圖實現(xiàn)代碼，供大家參考，具體內(nèi)容如下

思路：

1、首先要有個盛放圖片的容器，設(shè)置為單幅圖片的寬高，且overflow：hidden，這樣保證每次可以只顯示一個圖片
2、Container內(nèi)有個放圖片的list進行position的定位，其中的圖片采用float的方式，同時當圖片進行輪播時，改變list的Left值使得其顯示的圖片發(fā)生變化。
3、圖片的輪播使用定時器，通過定時器改變list的Left值是的圖片循環(huán)展示
4、當鼠標滑動到圖片上時，清除定時器，圖片停止輪播，當鼠標移出時繼續(xù)進行輪播
5、圖片上有一組小圓點用于與當前顯示的圖片相對應(yīng)，同時可以通過點擊的方式查看對應(yīng)的圖片
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];
 /*鼠標移動到容器上時，停止制動滑動，離開時繼續(xù)滾動*/
 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>

精彩專題分享：jQuery圖片輪播 JavaScript圖片輪播 Bootstrap圖片輪播

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: