jQuery實現(xiàn)圖片走馬燈效果的原理分析
本文實例分析了jQuery實現(xiàn)圖片走馬燈效果的原理。分享給大家供大家參考,具體如下:
這里只講解水平走馬燈效果,垂直向上走馬燈效果不講解,原理一樣,但是水平走馬燈效果有一個小坑。待會講解
先上代碼:
HTML:
<div class="box"> <div style="width: 1000px;" id="boxdiv"> <ul> <li style="display: block;" title="清靈少女宛如夢境仙女"><a href="#"> <img src="images/110927/11-11092G32227.jpg" /></a></li> <li title="美女海邊性感透視裝誘惑"><a href="#"> <img src="images/130621/1-130621145931-50.jpg" /></a></li> <li title="夏小薇:百變小魔女變身性感數(shù)碼寶貝"><a href="#"> <img src="images/130620/19-130620115013.jpg" /></a></li> <li title="夏小薇化身《殺破狼》粉色妖姬鮮嫩欲滴"><a href="#"> <img src="images/130315/5-130315135240.jpg" /></a></li> </ul> </div> </div>
在<div class="box">中,再包含了一個div,且設(shè)置了一個很比較大的寬度,是為了解決一個在垂直走馬燈下沒有的坑。該坑的效果是在li標簽float為left的情況,不要里面的DIV,會出現(xiàn)圖片輪播后,顯示中的最后一張圖片由下向上的跳動效果,這是float的本身特性造成的,因為父元素寬度不夠的情況下,后面的元素會自動往下左沉下去,一旦上面寬度夠了,就會自動飄上來,這個飄就會造成顯示中的最后一張圖片的跳動效果,所以采用內(nèi)部嵌套一個DIV 并設(shè)置<div class="box">的overflow CSS樣式來解決該問題。
CSS:
.box { width: 800px; height: 200px; margin-top: 100px; margin-left: 100px; overflow: hidden; } .box img { border-style: none; height: 200px; } .box ul { margin: 0px; padding: 0px; list-style-type: none; } .box ul li { float: left; }
腳本:
<script type="text/javascript"> $(document).ready(function () { new ZouMa().Start(); }); function ZouMa() { this.maxLength = 3; //最低顯示數(shù) this.Timer = 2000;//計時器間隔時間 this.Ul = $(".box ul"); var handId;//計時器id var self = this; this.Start = function () { if (self.Ul.children().length < this.maxLength) { self.Ul.append(self.Ul.children().clone()); } handId = setInterval(self.Play, self.Timer); } this.Play = function () { var img = self.Ul.children().eq(0); var left = img.children().eq(0).width(); img.animate({ "marginLeft": (-1 * left) + "px" }, 600, function () { //appendTo函數(shù)是實現(xiàn)走馬燈一直不間斷播放的秘訣。 //目前網(wǎng)上看到的很多走馬燈,走到最后一張的時候,會立馬閃回第一張,而不是繼續(xù)從后往前推進,即是沒有明白該函數(shù)的作用的原因 $(this).css("margin-left", "auto").appendTo(self.Ul); }); } } </script>
此處照例使用了jquery的動畫效果函數(shù)animate來實現(xiàn)走馬燈效果,并配合appendTo函數(shù)來實現(xiàn)無盡播放的效果。
有關(guān)appendTo函數(shù)的作用請參閱jquery的API文檔,animate也請參閱API文檔
更多關(guān)于jQuery特效相關(guān)內(nèi)容感興趣的讀者可查看本站專題:《jQuery動畫與特效用法總結(jié)》與《jQuery常見經(jīng)典特效匯總》
希望本文所述對大家jQuery程序設(shè)計有所幫助。
相關(guān)文章
Jquery 組合form元素為json格式,asp.net反序列化
Jquery組合form元素為json格式,asp.net反序列化實現(xiàn)代碼,大家可以具體的看下面的說明。2009-07-07jQuery學(xué)習(xí)筆記之jQuery原型屬性和方法
這篇文章主要介紹了jQuery原型屬性和方法,,需要的朋友可以參考下2014-06-06