首頁  >  文章  >  web前端  >  基於jquery實現輪播特效_jquery

基於jquery實現輪播特效_jquery

WBOY
WBOY原創
2016-05-16 15:04:201122瀏覽

       輪播是學習jquery開始的第二個實現的動效,也是學習時間最久的一個。在實現輪播的過程中總是會遇到各種各樣的問題,請教過很多人,也多次問過度娘。今天,也不敢果敢的說,可以馬上寫好一個輪播。

        希望是透過隨筆的方式,並記錄下一些思考過程。

  首先是html結構,一個簡單的輪播,單張圖片無縫輪播,主要分為三大層:div>ul>li,li裡面的img圖片。

  其次,css樣式:div固定住寬高,overflow:hidden;ul的寬度建議是動態獲取(下一步會講是怎麼獲取);關於li我習慣使用浮動,讓他們依次排列,在ul上要記得清楚浮動(clear:both)。

  重要的是jquery的方法,主要有用到的有animate(),setInterval(),hover()。在寫入方法之前,縷清一下動效的邏輯:圖片依次循環自右向左滑過,當滑完最後一張時,第一張顯示,如此重複。

1、取得li的個數length和寬度width 

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

        因為是無縫輪播,而要實現自然的過渡,我們還得做點什麼,當圖片滑到最後一張時,怎麼樣才會很自然的過渡到第一張,這個時候,如果第一張就在最後一張的後面,就可以了,所以,我們需要將第一張clone後append到li的最後

$('li:first').clone().appendTo('ul')

2、取得ul的寬度:ul的寬度等於所有li的寬度加上複製的li的寬度

ulWidth=liWidth*(len+1)

似乎準備工作都做好了,那下一步我們就嘗試讓他動起來,首先想到是animate()方法:

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

    第一個參數properties:css的屬性和值的對象,決定動畫的效果,是上下還是左右等;

    第二個參數duration:完成一個動畫的時間,預設是400,單位是毫秒;

    第三個參數easing:動畫轉換使用的緩動函數,預設是swing(linear,swing),一般不用這個參數;

    第四個參數complete:是指完成動畫後執行的操作。

我們的動效是自右向左,所以透過改變ul的margin-left值來實現

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

其中index指的是li的索引值,當li的索引值等於li的length值的時候,也就是動畫執行到了最後一張,那麼直接讓ul的margin-left為0,li的索引值也為0。

這樣還存在一個隱患,暫時不提。

下一步,當滑鼠離開div的時候,圖片自動播放。這是要用hover()和setInterval()

setInterval()在W3C是這樣解釋的:按照指定的周期(以毫秒計)來呼叫函數或計算表達式。不停地呼叫函數,直到 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');

這樣,一個自動播放的功能似乎就實現了,可是我們還可以發現一個bug,第一幀停留的時間似乎有些長,為什麼呢?

這個問題還是昨天得到了解決,當圖片執行到最後一張時,他的index馬上變為0,然後會執行兩次,因此在這個判斷中,我們需要當index為0時,讓它自加1,index++,放到判斷條件下。

還有一個問題,是昨天發現的,在這個輪播裡面有兩個時間,一個是動畫執行時間,一個是播放時間,前者的時間一定要比後者的時間小,原因是js的執行順序呢是自上而下的,,如果時間一致或後者時間小於前者,那麼,在這個時差裡,動畫將進不到判斷條件裡來,會一直播放,那麼輪播就失敗了。今天就分享到這裡,下次分享加上左右箭頭和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 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> 

以上就是本文的全部內容,希望對大家的學習有所幫助。

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn