Analisis prinsip jQuery untuk mencapai kesan pintu pusingan pictures

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="images/110927/11-11092G32227.jpg" /></a></li>
    <li title="美女海边性感透视装诱惑"><a href="#">
     <img src="images/130621/1-130621145931-50.jpg" /></a></li>
    <li title="夏小薇：百变小魔女变身性感数码宝贝"><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>

Salin selepas log masuk

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

Salin selepas log masuk

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>

Salin selepas log masuk

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.

Label berkaitan：

jquery gambar

sumber：php.cn

Artikel sebelumnya：Fahami penggunaan Promise dalam kemahiran JavaScript_javascript Artikel seterusnya：Penjelasan terperinci tentang penggunaan acara fokus JavaScript, acara tetikus dan kemahiran event_javascript roda skrol

Kenyataan Laman Web ini

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel terbaru oleh pengarang