Analisis prinsip jQuery untuk mencapai kesan pintu pusingan pictures_jquery

Artikel ini menganalisis prinsip jQuery untuk mencapai kesan pintu pusingan imej. Kongsikan dengan semua orang untuk rujukan anda, butirannya adalah seperti berikut:

Di sini kami hanya menerangkan kesan pintu pusingan mendatar, bukan kesan pintu pusingan menegak ke atas Prinsipnya adalah sama, tetapi terdapat perangkap kecil dalam kesan pintu pusingan mendatar. Akan dijelaskan kemudian

Masukkan kod dahulu:

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="Analisis prinsip jQuery untuk mencapai kesan pintu pusingan pictures_jquery" ></a></li>
    <li title="美女海边性感透视装诱惑"><a href="#">
     <img  src="/static/imghwm/default1.png"  data-src="images/130621/1-130621145931-50.jpg"  class="lazy" / alt="Analisis prinsip jQuery untuk mencapai kesan pintu pusingan pictures_jquery" ></a></li>
    <li title="夏小薇：百变小魔女变身性感数码宝贝"><a href="#">
     <img  src="/static/imghwm/default1.png"  data-src="images/130620/19-130620115013.jpg"  class="lazy" / alt="Analisis prinsip jQuery untuk mencapai kesan pintu pusingan pictures_jquery" ></a></li>
    <li title="夏小薇化身《杀破狼》粉色妖姬鲜嫩欲滴"><a href="#">
     <img  src="/static/imghwm/default1.png"  data-src="images/130315/5-130315135240.jpg"  class="lazy" / alt="Analisis prinsip jQuery untuk mencapai kesan pintu pusingan pictures_jquery" ></a></li>
   </ul>
  </div>
</div>

Dalam

, div lain disertakan dan lebar yang sangat besar ditetapkan untuk menyelesaikan lubang yang tidak wujud di bawah pintu pusingan menegak. Kesan pit ini ialah apabila li tag float dibiarkan, tanpa DIV di dalam, gambar terakhir dalam paparan akan melompat dari bawah ke atas selepas karusel gambar Ini disebabkan oleh ciri-ciri float itu sendiri, kerana Apabila lebar elemen induk tidak mencukupi, elemen berikut akan tenggelam secara automatik dan ke kiri Apabila lebar atas sudah mencukupi, ia akan terapung secara automatik akan menyebabkan gambar terakhir dalam paparan melompat, jadi dalaman Sarang DIV dan tetapkan gaya CSS limpahan

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;
}

Skrip:

<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>

Seperti biasa, animasi fungsi kesan animasi jquery digunakan di sini untuk mencapai kesan pintu pusingan, dan ia digabungkan dengan fungsi appendTo untuk mencapai kesan main balik tanpa henti.

Untuk fungsi appendTo, sila rujuk dokumentasi API jquery, dan untuk animasi, sila rujuk dokumentasi API

Pembaca yang berminat dengan lebih banyak kandungan yang berkaitan dengan kesan khas jQuery boleh menyemak topik khas di tapak ini: "Ringkasan animasi jQuery dan penggunaan kesan khas" dan "Ringkasan klasik biasa Kesan khas jQuery"

Saya harap artikel ini akan membantu semua orang dalam pengaturcaraan jQuery.