快捷導(dǎo)航

教你一步步用jQyery實(shí)現(xiàn)輪播器

更新時(shí)間：2016年12月18日 11:58:46 作者：AnJikx

相信大家應(yīng)該都會(huì)看到在各大網(wǎng)站上都有一個(gè)輪播器的效果，于是自己不禁也想做一個(gè)，查了資料，看了輪播器的原理，慢慢的試著做了做，最終效果勉勉強(qiáng)強(qiáng)，但還是想總結(jié)出來，或許對(duì)有需要的朋友們帶來一定的幫助，下面來一起看看吧。

實(shí)現(xiàn)原理

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

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

接下來我們?cè)谠O(shè)置<div>的屬性overflow:hidden，那么<div>窗口以外的圖片不顯示，只顯示移動(dòng)到當(dāng)前窗口的圖片，是不是又完美了一些，感覺快做好了是吧！

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

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

<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>

接下來設(shè)置一下樣式

<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實(shí)現(xiàn)點(diǎn)擊輪播圖片、自動(dòng)輪播圖片，鼠標(biāo)移動(dòng)上去停止輪播

$(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); //鼠標(biāo)移上去，清除掉自動(dòng)輪播功能，即定時(shí)輪播
  },autoPlay); 
 navbs.on("click",function(){ //點(diǎn)擊輪播事件
  var me=$(this);
   inow=me.index();  //此處變量用的與自動(dòng)輪播函數(shù)里的相同，為的是能在隨便點(diǎn)擊后，自動(dòng)輪播時(shí)按照我們點(diǎn)擊了的繼續(xù)向后輪播，這叫動(dòng)態(tài)實(shí)時(shí)
  ul.animate({left:-inow*onwidth},0.01); //ul向左移動(dòng)從而使得下一個(gè)li顯示到div的當(dāng)前窗口
  navbs.removeClass("active");   //清除掉上一個(gè)點(diǎn)擊按鈕的樣式
  me.addClass("active");     //為當(dāng)前被點(diǎn)擊的按鈕添加第一個(gè)按鈕樣式
 });
 autoPlay();     
 function autoPlay(){     //自動(dòng)輪播函數(shù)
 timer=setInterval(function(){   //開定時(shí)器
  inow++;
  if(inow==navbs.length){    //判斷是否到了最后一張，若是到了，返回到第一張
   inow=0
   }
  navbs.eq(inow).trigger("click"); //根據(jù)定時(shí)的時(shí)間用span的索引自動(dòng)調(diào)用click事件，trigger為jQuery的自動(dòng)調(diào)用函數(shù)
  },3000);
 }

});



});

看一下效果圖？好的