jQuery實現圖片走馬燈效果的原理分析_jquery

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

這裡只講解水平走馬燈效果，垂直向上走馬燈效果不講解，原理一樣，但是水平走馬燈效果有一個小坑。待會講解

先上程式碼：

HTML：

<div class="box">  
  <div style="width: 1000px;" id="boxdiv">
   <ul>
    <li style="display: block;" title="清灵少女宛如梦境仙女"><a href="#">
     <img  src="/static/imghwm/default1.png"  data-src="images/110927/11-11092G32227.jpg"  class="lazy" / alt="jQuery實現圖片走馬燈效果的原理分析_jquery" ></a></li>
    <li title="美女海边性感透视装诱惑"><a href="#">
     <img  src="/static/imghwm/default1.png"  data-src="images/130621/1-130621145931-50.jpg"  class="lazy" / alt="jQuery實現圖片走馬燈效果的原理分析_jquery" ></a></li>
    <li title="夏小薇：百变小魔女变身性感数码宝贝"><a href="#">
     <img  src="/static/imghwm/default1.png"  data-src="images/130620/19-130620115013.jpg"  class="lazy" / alt="jQuery實現圖片走馬燈效果的原理分析_jquery" ></a></li>
    <li title="夏小薇化身《杀破狼》粉色妖姬鲜嫩欲滴"><a href="#">
     <img  src="/static/imghwm/default1.png"  data-src="images/130315/5-130315135240.jpg"  class="lazy" / alt="jQuery實現圖片走馬燈效果的原理分析_jquery" ></a></li>
   </ul>
  </div>
</div>

在

中，再包含了一個div，且設定了一個很比較大的寬度，是為了解決一個在垂直走馬燈下沒有的坑。該坑的效果是在li標籤float為left的情況，不要裡面的DIV，會出現圖片輪播後，顯示中的最後一張圖片由下向上的跳動效果，這是float的本身特性造成的，因為父元素寬度不夠的情況下，後面的元素會自動往下左沉下去，一旦上面寬度夠了，就會自動飄上來，這個飄就會造成顯示中的最後一張圖片的跳動效果，所以採用內部嵌套一個DIV 並設定

的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; //最低显示数   
 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函数是实现走马灯一直不间断播放的秘诀。
   //目前网上看到的很多走马灯，走到最后一张的时候，会立马闪回第一张，而不是继续从后往前推进，即是没有明白该函数的作用的原因
   $(this).css("margin-left", "auto").appendTo(self.Ul);
  });
 }
}
</script>

此處照例使用了jquery的動畫效果函數animate來實現走馬燈效果，並配合appendTo函數來實現無盡播放的效果。

有關appendTo函數的作用請參閱jquery的API文檔，animate也請參閱API文檔

更多關於jQuery特效相關內容有興趣的讀者可查看本站專題：《jQuery動畫與特效用法總結》與《jQuery常見經典特效總結》

》

希望本文所述對大家jQuery程式設計有所幫助。