教你一步步用jQyery實現輪播器

2019-11-19 18:24:33

字體：大中小

來源：轉載

供稿：網友

實現原理

如圖，試想一下，若是將<ul>的width屬性值設置的很寬，直到可以裝下你所有的圖片，而每一個圖片又用<li>包著并且設置了左浮動。

那么當我們向左移動ul的時候并且移動的距離為<li>的寬度，第二個<li>不就被移動到了<div>的窗口，這樣一來圖片不就被一張一張顯示出來了嗎？

接下來我們在設置<div>的屬性overflow:hidden，那么<div>窗口以外的圖片不顯示，只顯示移動到當前窗口的圖片，是不是又完美了一些，感覺快做好了是吧！

說了一些原理，好了，直接上代碼，記得引入jquery。

這是div做的布局，做的時候記得加上邊框，做后在刪掉，這樣便于測試

<div class="slideShow"> <div class="nav-t">  <ul>   <li><a href="#" target="_blank"><img src="images/1.png" alt=""></a></li>   <li><a href="#" target="_blank"><img src="images/2.png" alt=""></a></li>   <li><a href="#" target="_blank"><img src="images/3.png" alt=""></a></li>   <li><a href="#" target="_blank"><img src="images/4.png" alt=""></a></li>   <li><a href="#" target="_blank"><img src="images/5.png" alt=""></a></li>  </ul>  <div class="nav-b">   <span class="active">1</span>   <span>2</span>   <span>3</span>   <span>4</span>   <span>5</span>  </div> </div> </div> <script type="text/javascript" src="jquery-min.js"></script> <script type="text/javascript" src="lunbo.js"></script>

接下來設置一下樣式

<style> .slideShow{  border:0px solid blue;  width:600px;  height:450px;  margin:50px auto;  position:relative; } .nav-t{  border:0px solid red;  width:580px;  height:430px;  margin:8px auto;  position:relative;  overflow:hidden; } .nav-t ul{  border:0px solid green;  list-style:none;  width:3000px;  height:430px;  margin:0;  padding:0;  position:relative; } .nav-t li{  height:427px;  width:580px;  float:left; } .nav-b{  position:absolute;  top:390px;  left:220px;  cursor:default; } .nav-b span{  margin-right:5px;  border:1px solid red;  padding:0 6px;  border-radius:12px;  color:#fff;  background:rgba(132,125,119,0.5);  cursor:pointer; } .nav-b span.active{  background:rgba(0,0,0,0.8); } </style>

用js實現點擊輪播圖片、自動輪播圖片，鼠標移動上去停止輪播

$(function(){  $(function(){ var slide=$(".slideShow"),  navt=slide.find(".nav-t"),  ul=navt.find("ul"),  navbs=slide.find(".nav-b span"),  onwidth=ul.find("li").eq(0).width(), //獲取ul下的li寬度  timer=null,  inow=0; navt.hover(function(){   clearInterval(timer); //鼠標移上去，清除掉自動輪播功能，即定時輪播  },autoPlay);  navbs.on("click",function(){ //點擊輪播事件  var me=$(this);   inow=me.index();  //此處變量用的與自動輪播函數里的相同，為的是能在隨便點擊后，自動輪播時按照我們點擊了的繼續向后輪播，這叫動態實時  ul.animate({left:-inow*onwidth},0.01); //ul向左移動從而使得下一個li顯示到div的當前窗口  navbs.removeClass("active");   //清除掉上一個點擊按鈕的樣式  me.addClass("active");     //為當前被點擊的按鈕添加第一個按鈕樣式 }); autoPlay();      function autoPlay(){     //自動輪播函數 timer=setInterval(function(){   //開定時器  inow++;  if(inow==navbs.length){    //判斷是否到了最后一張，若是到了，返回到第一張   inow=0   }  navbs.eq(inow).trigger("click"); //根據定時的時間用span的索引自動調用click事件，trigger為jQuery的自動調用函數  },3000); }});});

看一下效果圖？好的