快捷導(dǎo)航

Jquery輪播效果實(shí)現(xiàn)過程解析

更新時(shí)間：2016年03月30日 11:42:25 作者：大倩301

這篇文章主要為大家詳細(xì)的分析了Jquery輪播效果實(shí)現(xiàn)過程的具體步驟以及實(shí)現(xiàn)思路，幫助大家快速實(shí)現(xiàn)Jquery輪播效果，感興趣的小伙伴們可以參考一下

輪播是學(xué)習(xí)jquery開始的第二個(gè)實(shí)現(xiàn)的動(dòng)效，也是學(xué)習(xí)時(shí)間最久的一個(gè)。在實(shí)現(xiàn)輪播的過程中總是會(huì)遇到各種各樣的問題，請教過很多人，也多次問過度娘。今天，也不敢果敢的說，可以馬上寫好一個(gè)輪播。希望是通過隨筆的方式，記錄下一些思維過程。

首先是html結(jié)構(gòu)，一個(gè)簡單的輪播，單張圖片無縫輪播，主要分為三大層：div>ul>li，li里面的img圖片。

其次，css樣式：div固定住寬高，overflow：hidden；ul的寬度建議是動(dòng)態(tài)獲?。ㄏ乱徊綍?huì)講是怎么獲?。魂P(guān)于li我習(xí)慣使用浮動(dòng)，讓他們依次排列，在ul上要記得清楚浮動(dòng)（clear：both）。

重要的是jquery的方法，主要有用到的有animate（），setInterval（），hover（）。在寫方法之前，縷清一下動(dòng)效的邏輯：圖片依次循環(huán)自右向左滑過，當(dāng)滑完最后一張時(shí)，第一張顯示，如此重復(fù)。

1、獲取li的個(gè)數(shù)length和寬度width

var len=$('li').length,
  liWidth=$('li').width,

因?yàn)槭菬o縫輪播，要實(shí)現(xiàn)自然的過渡，我們還得做點(diǎn)什么，當(dāng)圖片滑到最后一張時(shí)，怎么樣才會(huì)很自然的過渡到第一張，這個(gè)時(shí)候，如果第一張就在最后一張的后面，就可以了，所以，我們需要將第一張clone后append到li的最后

$('li:first').clone().appendTo('ul')
2、獲取ul的寬度：ul的寬度等于所有l(wèi)i的寬度加上克隆的li的寬度

ulWidth=liWidth*(len+1)
似乎準(zhǔn)備工作都做好了，那下一步我們就嘗試讓他動(dòng)起來，首先想到是animate（）方法：

animate( properties [, duration ] [, easing ] [, complete ] )，

　　　　第一個(gè)參數(shù)properties：css的屬性和值的對象，決定動(dòng)畫的效果，是上下還是左右等；

　　　　第二個(gè)參數(shù)duration：完成一個(gè)動(dòng)畫的時(shí)間，默認(rèn)是400，單位是毫秒；

　　　　第三個(gè)參數(shù)easing：動(dòng)畫過渡使用的緩動(dòng)函數(shù)，默認(rèn)是swing（linear，swing），一般不用這個(gè)參數(shù)；

　　　　第四個(gè)參數(shù)complete：是指完成動(dòng)畫后執(zhí)行的操作。

我們的動(dòng)效是自右向左，所以通過改變ul的margin-left值來實(shí)現(xiàn)

$('ul').animate({
  'marign-left': -liWidth*index
},3000,function(){
  if(index==len){
   index=0;
   $('ul').css({'margin-left':'0px'})
  } 
})

其中index指的是li的索引值，當(dāng)li的索引值等于li的length值的時(shí)候，也就是動(dòng)畫執(zhí)行到了最后一張，那么直接讓ul的margin-left為0，li的索引值也為0。

這樣還存在一個(gè)隱患，暫時(shí)不提。

下一步，當(dāng)鼠標(biāo)離開div的時(shí)候，圖片自動(dòng)播放。這是要用到hover（）和setInterval（）

setInterval（）在W3C是這樣解釋的：按照指定的周期（以毫秒計(jì)）來調(diào)用函數(shù)或計(jì)算表達(dá)式。不停地調(diào)用函數(shù)，直到 clearInterval() 被調(diào)用或窗口被關(guān)閉。

var autoPlay;
$('div').hover(function(){
  clearInterval(autoPlay); 
},function(){
  autoPlay=setInterval(function(){

$('ul').animate({

'marign-left': -liWidth*index
},3000,function(){
  if(index==len){
   index=0;
   $('ul').css({'margin-left':'0px'})；
　　　　index++;
  } 
});
}，3000) 
}).trigger('mouseleave');

這樣，一個(gè)自動(dòng)播放的功能似乎就實(shí)現(xiàn)了，可是我們還可以發(fā)現(xiàn)一個(gè)bug，第一幀停留的時(shí)間似乎有些長，為什么呢？

這個(gè)問題還是昨天得到了解決，當(dāng)圖片執(zhí)行到最后一張時(shí)，他的index馬上變?yōu)?，然后會(huì)執(zhí)行兩次，因此在這個(gè)判斷中，我們需要當(dāng)index為0時(shí)，讓它自加1，index++，放到判斷條件下。

還有一個(gè)問題，是昨天發(fā)現(xiàn)的，在這個(gè)輪播里面有兩個(gè)時(shí)間，一個(gè)是動(dòng)畫執(zhí)行時(shí)間，一個(gè)是播放時(shí)間，前者的時(shí)間一定要比后者的時(shí)間小，原因是js的執(zhí)行順序呢是自上而下的，，如果時(shí)間一致或者后者時(shí)間小于前者，那么，在這個(gè)時(shí)差里，動(dòng)畫將進(jìn)不到判斷條件里來，會(huì)一直播放，那么輪播就失敗了。今天就分享到這里，下一次分享加上左右箭頭和hover圓點(diǎn)的輪播效果。

附上完整的代碼：

<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>輪播</title>
  <style>
    body,p,form,input,button,dl,dt,dd,ul,ol,li,h1,h2,h3,h4{margin:0;padding:0;list-style:none;}
    body,button,input,select,textarea{font:12px Arial, Helvetica, sans-serif;color:#333;}
    input,select,textarea{font-size:100%;}
    .clearfix:after{display:block;content:".";height:0;visibility:hidden;clear:both;font-size:0;line-height:0;}
    .clearfix{*zoom:1;}
    .big-screen{width: 100%; height: 400px; overflow: hidden; margin: 40px 0;}
    .pic-list{height: 400px;}
    .pic-list li{float: left; width: 1920px; height: 400px;}
   </style>
</head>
<body>
  <div class="big-screen">
    <ul class="pic-list clearfix">
      <li>
        <a href="javascript:;">
          <img src="http://fed.yhd.cn:9000/1920x400/27ae60xfff" alt="picture" width="1920" height="400"/>
        </a>
      </li>
      <li>
        <a href="javascript:;">
          <img src="http://fed.yhd.cn:9000/1920x400/ae273axfff" alt="picture" width="1920" height="400"/>
        </a>
      </li>
      <li>
        <a href="javascript:;">
          <img src="http://fed.yhd.cn:9000/1920x400/2757aexfff" alt="picture" width="1920" height="400"/>
        </a>
      </li>
      <li>
        <a href="javascript:;">
          <img src="http://fed.yhd.cn:9000/1920x400/ae7d27xfff" alt="picture" width="1920" height="400"/>
        </a>
      </li>
    </ul>
  </div>
</body>
<script type="text/javascript" src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var ul=$('.pic-list'),
      li=ul.find('li'),
      liW=li.outerWidth(true),
      liLen=li.length,
      index=0,
      autoPlay;
    li.first().clone().appendTo(ul);
    ul.css({'width':liW*(liLen+1),'margin-left':-liW*index});
    function play(){
      if(!ul.is('animated')){
        ul.stop().animate({
          'margin-left':-liW*index
        },480,function(){
          if(index>liLen){
            index=0;
            ul.css({'margin-left':-liW*index});
            index++;
          }
        });
      }
    }
    $('.big-screen').hover(function(){
      clearInterval(autoPlay);
    },function(){
      autoPlay=setInterval(function(){
        play();
        index++;
      },500)
    }).trigger('mouseleave');

})
</script>
</html>

以上就是為大家分享的jquery輪播效果完整代碼，希望對大家的學(xué)習(xí)有所幫助。

您可能感興趣的文章: