教你一步步用jQyery實現輪播器-js教程-PHP中文網

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

高洛峰

發布： 2017-01-07 13:10:27

原創

1796 人瀏覽過

實現原理

如圖，試想一下，若是將

包著並且設定了左浮動。
那麼當我們向左移動ul的時候並且移動的距離為
的寬度，第二個

不就被移動到了

的窗口，這樣一來圖片不就被一張一張顯示出來了嗎？

接下來我們在設定

的屬性overflow:hidden，那麼

視窗以外的圖片不顯示，只顯示移動到目前視窗的圖片，是不是又完美了一些，感覺快做好了是吧！

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

說了一些原理，好了，直接上程式碼，記得引入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);
 }
 
});
 
 
 
});

登入後複製

看一下效果圖？好的

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