jQuery實現輪播圖及其原理詳解

2019-11-19 13:14:28

字體：大中小

來源：轉載

供稿：網友

本文實例為大家分享了jQuery實現輪播圖及其原理的具體代碼，供大家參考，具體內容如下

<!DOCTYPE html><html><head> <meta charset="utf-8" name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"> <title>JQuery輪播圖</title> <style>  *{   padding:0;   margin:0;  }  .container{   width:600px;   height:400px;   overflow: hidden;   position:relative;   margin:0 auto;  }  .list{   width:3000px;   height:400px;   position:absolute;  }  .list>img{   float:left;   width:600px;   height:400px;  }  .pointer{   position:absolute;   width:100px;   bottom:20px;   left:250px;  }  .pointer>span{   cursor:pointer;   display:inline-block;   width:10px;   height:10px;   background: #7b7d80;   border-radius:50%;   border:1px solid #fff;  }  .pointer .on{   background: #28a4c9;  }  .arrow{   position:absolute;   text-decoration:none;   width:40px;   height:40px;   background: #727d8f;   color:#fff;   font-weight: bold;   line-height:40px;   text-align:center;   top:180px;   display:none;  }  .arrow:hover{   background: #0f0f0f;  }  .left{   left:0;  }  .right{   right:0;  }  .container:hover .arrow{   display:block;  } </style></head><body> <div class="container">  <div class="list" style="left:0px;">   <!--<img src="../static/image/photo1.jpg" alt="5"/>-->   <img src="../static/image/banner.jpg" alt="1"/>   <img src="../static/image/slide1.jpg" alt="2"/>   <img src="../static/image/slide1.jpg" alt="3"/>   <img src="../static/image/slide1.jpg" alt="4"/>   <img src="../static/image/photo1.jpg" alt="5"/>   <!--<img src="../static/image/banner.jpg" alt="1"/>-->  </div>  <div class="pointer">   <span index="1" class="on"></span>   <span index="2"></span>   <span index="3"></span>   <span index="4"></span>   <span index="5"></span>  </div>  <a href="#" rel="external nofollow" rel="external nofollow" class="arrow left">></a>  <a href="#" rel="external nofollow" rel="external nofollow" class="arrow right"><</a> </div> <script src="../static/js/jquery-3.2.1.min.js"></script> <script>  var imgCount = 5;  var index = 1;  var intervalId;  var buttonSpan = $('.pointer')[0].children;//htmlCollection 集合  //自動輪播功能 使用定時器  autoNextPage();  function autoNextPage(){   intervalId = setInterval(function(){    nextPage(true);   },3000);  }  //當鼠標移入 停止輪播  $('.container').mouseover(function(){   console.log('hah');   clearInterval(intervalId);  });  // 當鼠標移出，開始輪播  $('.container').mouseout(function(){   autoNextPage();  });  //點擊下一頁 上一頁的功能  $('.left').click(function(){   nextPage(true);  });  $('.right').click(function(){   nextPage(false);  });  //小圓點的相應功能 事件委托  clickButtons();  function clickButtons(){   var length = buttonSpan.length;   for(var i=0;i<length;i++){    buttonSpan[i].onclick = function(){     $(buttonSpan[index-1]).removeClass('on');     if($(this).attr('index')==1){      index = 5;     }else{      index = $(this).attr('index')-1;     }     nextPage(true);    };   }  }  function nextPage(next){   var targetLeft = 0;   //當前的圓點去掉on樣式   $(buttonSpan[index-1]).removeClass('on');   if(next){//往后走    if(index == 5){//到最后一張，直接跳到第一張     targetLeft = 0;     index = 1;    }else{     index++;     targetLeft = -600*(index-1);    }   }else{//往前走    if(index == 1){//在第一張，直接跳到第五張     index = 5;     targetLeft = -600*(imgCount-1);    }else{     index--;     targetLeft = -600*(index-1);    }   }   $('.list').animate({left:targetLeft+'px'});   //更新后的圓點加上樣式   $(buttonSpan[index-1]).addClass('on');  } </script></body></html>

效果圖：