基於jquery實現輪播特效_jquery
輪播是學習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>
以上就是本文的全部內容，希望對大家的學習有所幫助。
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
AI Hentai Generator
免費產生 AI 無盡。
熱門文章
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
熱門話題
如何在瀏覽器中優化JavaScript代碼以進行性能？
Mar 18, 2025 pm 03:14 PM
本文討論了在瀏覽器中優化JavaScript性能的策略，重點是減少執行時間並最大程度地減少對頁面負載速度的影響。
誰得到更多的Python或JavaScript？
Apr 04, 2025 am 12:09 AM
Python和JavaScript開發者的薪資沒有絕對的高低，具體取決於技能和行業需求。 1.Python在數據科學和機器學習領域可能薪資更高。 2.JavaScript在前端和全棧開發中需求大，薪資也可觀。 3.影響因素包括經驗、地理位置、公司規模和特定技能。
如何使用瀏覽器開發人員工具有效調試JavaScript代碼？
Mar 18, 2025 pm 03:16 PM
本文討論了使用瀏覽器開發人員工具的有效JavaScript調試，專注於設置斷點，使用控制台和分析性能。
如何使用JavaScript將具有相同ID的數組元素合併到一個對像中？
Apr 04, 2025 pm 05:09 PM
如何在JavaScript中將具有相同ID的數組元素合併到一個對像中？在處理數據時，我們常常會遇到需要將具有相同ID�...
如何使用源地圖調試縮小JavaScript代碼？
Mar 18, 2025 pm 03:17 PM
本文說明瞭如何使用源地圖通過將其映射回原始代碼來調試JAVASCRIPT。它討論了啟用源地圖，設置斷點以及使用Chrome DevTools和WebPack之類的工具。
神秘的JavaScript：它的作用以及為什麼重要
Apr 09, 2025 am 12:07 AM
JavaScript是現代Web開發的基石，它的主要功能包括事件驅動編程、動態內容生成和異步編程。 1)事件驅動編程允許網頁根據用戶操作動態變化。 2)動態內容生成使得頁面內容可以根據條件調整。 3)異步編程確保用戶界面不被阻塞。 JavaScript廣泛應用於網頁交互、單頁面應用和服務器端開發，極大地提升了用戶體驗和跨平台開發的靈活性。
