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

字號:


    這篇文章主要為大家詳細的分析了Jquery輪播效果實現(xiàn)過程的具體步驟以及實現(xiàn)思路,幫助大家快速實現(xiàn)Jquery輪播效果,感興趣的小伙伴們可以參考一下
    輪播是學習jquery開始的第二個實現(xiàn)的動效,也是學習時間最久的一個。在實現(xiàn)輪播的過程中總是會遇到各種各樣的問題,請教過很多人,也多次問過度娘。今天,也不敢果敢的說,可以馬上寫好一個輪播。希望是通過隨筆的方式,記錄下一些思維過程。
    首先是html結構,一個簡單的輪播,單張圖片無縫輪播,主要分為三大層:div>ul>li,li里面的img圖片。
    其次,css樣式:div固定住寬高,overflow:hidden;ul的寬度建議是動態(tài)獲?。ㄏ乱徊綍v是怎么獲取);關于li我習慣使用浮動,讓他們依次排列,在ul上要記得清楚浮動(clear:both)。
    重要的是jquery的方法,主要有用到的有animate(),setInterval(),hover()。在寫方法之前,縷清一下動效的邏輯:圖片依次循環(huán)自右向左滑過,當滑完最后一張時,第一張顯示,如此重復。
    1、獲取li的個數(shù)length和寬度width 
    var len=$('li').length,
      liWidth=$('li').width,
    因為是無縫輪播,要實現(xiàn)自然的過渡,我們還得做點什么,當圖片滑到最后一張時,怎么樣才會很自然的過渡到第一張,這個時候,如果第一張就在最后一張的后面,就可以了,所以,我們需要將第一張clone后append到li的最后
    $('li:first').clone().appendTo('ul')
    2、獲取ul的寬度:ul的寬度等于所有l(wèi)i的寬度加上克隆的li的寬度
    ulWidth=liWidth*(len+1)
    似乎準備工作都做好了,那下一步我們就嘗試讓他動起來,首先想到是animate()方法:
    animate( properties [, duration ] [, easing ] [, complete ] ),
    第一個參數(shù)properties:css的屬性和值的對象,決定動畫的效果,是上下還是左右等;
    第二個參數(shù)duration:完成一個動畫的時間,默認是400,單位是毫秒;
    第三個參數(shù)easing:動畫過渡使用的緩動函數(shù),默認是swing(linear,swing),一般不用這個參數(shù);
    第四個參數(shù)complete:是指完成動畫后執(zhí)行的操作。
    我們的動效是自右向左,所以通過改變ul的margin-left值來實現(xiàn)
    $('ul').animate({
      'marign-left': -liWidth*index
    },3000,function(){
      if(index==len){
       index=0;
       $('ul').css({'margin-left':'0px'})
      } 
    })  
    其中index指的是li的索引值,當li的索引值等于li的length值的時候,也就是動畫執(zhí)行到了最后一張,那么直接讓ul的margin-left為0,li的索引值也為0。
    這樣還存在一個隱患,暫時不提。
    下一步,當鼠標離開div的時候,圖片自動播放。這是要用到hover()和setInterval()
    setInterval()在W3C是這樣解釋的:按照指定的周期(以毫秒計)來調用函數(shù)或計算表達式。不停地調用函數(shù),直到 clearInterval() 被調用或窗口被關閉。
    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');
    這樣,一個自動播放的功能似乎就實現(xiàn)了,可是我們還可以發(fā)現(xiàn)一個bug,第一幀停留的時間似乎有些長,為什么呢?
    這個問題還是昨天得到了解決,當圖片執(zhí)行到最后一張時,他的index馬上變?yōu)?,然后會執(zhí)行兩次,因此在這個判斷中,我們需要當index為0時,讓它自加1,index++,放到判斷條件下。
    還有一個問題,是昨天發(fā)現(xiàn)的,在這個輪播里面有兩個時間,一個是動畫執(zhí)行時間,一個是播放時間,前者的時間一定要比后者的時間小,原因是js的執(zhí)行順序呢是自上而下的,,如果時間一致或者后者時間小于前者,那么,在這個時差里,動畫將進不到判斷條件里來,會一直播放,那么輪播就失敗了。今天就分享到這里,下一次分享加上左右箭頭和hover圓點的輪播效果。
    附上完整的代碼:
    <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>
        <ul>
          <li>
            <a href="javascript:;">
              <img src="http://fed.yhd.cn:9000/1920x400/27ae60xfff" width="1920" height="400"/>
            </a>
          </li>
          <li>
            <a href="javascript:;">
              <img src="http://fed.yhd.cn:9000/1920x400/ae273axfff" width="1920" height="400"/>
            </a>
          </li>
          <li>
            <a href="javascript:;">
              <img src="http://fed.yhd.cn:9000/1920x400/2757aexfff" width="1920" height="400"/>
            </a>
          </li>
          <li>
            <a href="javascript:;">
              <img src="http://fed.yhd.cn:9000/1920x400/ae7d27xfff" 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輪播效果完整代碼,希望對大家的學習有所幫助。