jQuery實(shí)現(xiàn)圖片走馬燈效果的原理分析

更新時(shí)間：2016年01月16日 12:07:59 作者：沖殺

這篇文章主要介紹了jQuery實(shí)現(xiàn)圖片走馬燈效果的原理,結(jié)合實(shí)例形式較為詳細(xì)的分析了jQuery實(shí)現(xiàn)走馬燈的相關(guān)html頁(yè)面設(shè)計(jì)、css樣式布局與jQuery相關(guān)函數(shù)的使用,需要的朋友可以參考下

本文實(shí)例分析了jQuery實(shí)現(xiàn)圖片走馬燈效果的原理。分享給大家供大家參考，具體如下：

這里只講解水平走馬燈效果，垂直向上走馬燈效果不講解，原理一樣，但是水平走馬燈效果有一個(gè)小坑。待會(huì)講解

先上代碼：

HTML：

<div class="box">  
  <div style="width: 1000px;" id="boxdiv">
   <ul>
    <li style="display: block;" title="清靈少女宛如夢(mèng)境仙女"><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">中，再包含了一個(gè)div，且設(shè)置了一個(gè)很比較大的寬度，是為了解決一個(gè)在垂直走馬燈下沒(méi)有的坑。該坑的效果是在li標(biāo)簽float為left的情況，不要里面的DIV，會(huì)出現(xiàn)圖片輪播后，顯示中的最后一張圖片由下向上的跳動(dòng)效果，這是float的本身特性造成的，因?yàn)楦冈貙挾炔粔虻那闆r下，后面的元素會(huì)自動(dòng)往下左沉下去，一旦上面寬度夠了，就會(huì)自動(dòng)飄上來(lái)，這個(gè)飄就會(huì)造成顯示中的最后一張圖片的跳動(dòng)效果，所以采用內(nèi)部嵌套一個(gè)DIV 并設(shè)置<div class="box">的overflow CSS樣式來(lái)解決該問(wèn)題。

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;//計(jì)時(shí)器間隔時(shí)間
 this.Ul = $(".box ul");
 var handId;//計(jì)時(shí)器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ù)是實(shí)現(xiàn)走馬燈一直不間斷播放的秘訣。
   //目前網(wǎng)上看到的很多走馬燈，走到最后一張的時(shí)候，會(huì)立馬閃回第一張，而不是繼續(xù)從后往前推進(jìn)，即是沒(méi)有明白該函數(shù)的作用的原因
   $(this).css("margin-left", "auto").appendTo(self.Ul);
  });
 }
}
</script>

此處照例使用了jquery的動(dòng)畫效果函數(shù)animate來(lái)實(shí)現(xiàn)走馬燈效果，并配合appendTo函數(shù)來(lái)實(shí)現(xiàn)無(wú)盡播放的效果。

有關(guān)appendTo函數(shù)的作用請(qǐng)參閱jquery的API文檔，animate也請(qǐng)參閱API文檔

更多關(guān)于jQuery特效相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《jQuery動(dòng)畫與特效用法總結(jié)》與《jQuery常見(jiàn)經(jīng)典特效匯總》

希望本文所述對(duì)大家jQuery程序設(shè)計(jì)有所幫助。

您可能感興趣的文章: