基於jquery實現輪播特效_jquery-js教程-PHP中文網

首頁

web前端

js教程

基於jquery實現輪播特效_jquery

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:04 PM

輪播是學習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="/static/imghwm/default1.png"  data-src="http://fed.yhd.cn:9000/1920x400/27ae60xfff"  class="lazy" alt="picture"    style="max-width:90%"  style="max-width:90%"/>
    </a>
   </li>
   <li>
    <a href="javascript:;">
     <img src="/static/imghwm/default1.png"  data-src="http://fed.yhd.cn:9000/1920x400/ae273axfff"  class="lazy" alt="picture"    style="max-width:90%"  style="max-width:90%"/>
    </a>
   </li>
   <li>
    <a href="javascript:;">
     <img src="/static/imghwm/default1.png"  data-src="http://fed.yhd.cn:9000/1920x400/2757aexfff"  class="lazy" alt="picture"    style="max-width:90%"  style="max-width:90%"/>
    </a>
   </li>
   <li>
    <a href="javascript:;">
     <img src="/static/imghwm/default1.png"  data-src="http://fed.yhd.cn:9000/1920x400/ae7d27xfff"  class="lazy" alt="picture"    style="max-width:90%"  style="max-width:90%"/>
    </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

在JavaScript中替換字符串字符Mar 11, 2025 am 12:07 AM

JavaScript字符串替換方法詳解及常見問題解答本文將探討兩種在JavaScript中替換字符串字符的方法：在JavaScript代碼內部替換和在網頁HTML內部替換。在JavaScript代碼內部替換字符串最直接的方法是使用replace()方法： str = str.replace("find","replace"); 該方法僅替換第一個匹配項。要替換所有匹配項，需使用正則表達式並添加全局標誌g： str = str.replace(/fi

構建您自己的Ajax Web應用程序Mar 09, 2025 am 12:11 AM

因此，在這裡，您準備好了解所有稱為Ajax的東西。但是，到底是什麼？ AJAX一詞是指用於創建動態，交互式Web內容的一系列寬鬆的技術。 Ajax一詞，最初由Jesse J創造

如何創建和發布自己的JavaScript庫？Mar 18, 2025 pm 03:12 PM

文章討論了創建，發布和維護JavaScript庫，專注於計劃，開發，測試，文檔和促銷策略。

如何在瀏覽器中優化JavaScript代碼以進行性能？Mar 18, 2025 pm 03:14 PM

本文討論了在瀏覽器中優化JavaScript性能的策略，重點是減少執行時間並最大程度地減少對頁面負載速度的影響。

如何使用瀏覽器開發人員工具有效調試JavaScript代碼？Mar 18, 2025 pm 03:16 PM

本文討論了使用瀏覽器開發人員工具的有效JavaScript調試，專注於設置斷點，使用控制台和分析性能。

jQuery矩陣效果Mar 10, 2025 am 12:52 AM

將矩陣電影特效帶入你的網頁！這是一個基於著名電影《黑客帝國》的酷炫jQuery插件。該插件模擬了電影中經典的綠色字符特效，只需選擇一張圖片，插件就會將其轉換為充滿數字字符的矩陣風格畫面。快來試試吧，非常有趣！工作原理插件將圖片加載到畫布上，讀取像素和顏色值： data = ctx.getImageData(x, y, settings.grainSize, settings.grainSize).data 插件巧妙地讀取圖片的矩形區域，並利用jQuery計算每個區域的平均顏色。然後，使用

如何構建簡單的jQuery滑塊Mar 11, 2025 am 12:19 AM

本文將引導您使用jQuery庫創建一個簡單的圖片輪播。我們將使用bxSlider庫，它基於jQuery構建，並提供許多配置選項來設置輪播。如今，圖片輪播已成為網站必備功能——一圖胜千言！決定使用圖片輪播後，下一個問題是如何創建它。首先，您需要收集高質量、高分辨率的圖片。接下來，您需要使用HTML和一些JavaScript代碼來創建圖片輪播。網絡上有很多庫可以幫助您以不同的方式創建輪播。我們將使用開源的bxSlider庫。 bxSlider庫支持響應式設計，因此使用此庫構建的輪播可以適應任何