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

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.

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

Alat AI Hot

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Penyingkiran pakaian AI

Video Face Swap

Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!

Tunjukkan Lagi

Artikel Panas

Assassin's Creed Shadows: Penyelesaian Riddle Seashell

3 minggu yang lalu By DDD

Apa yang Baru di Windows 11 KB5054979 & Cara Memperbaiki Masalah Kemas Kini

2 minggu yang lalu By DDD

Di mana untuk mencari kad kunci kawalan kren di atomfall

3 minggu yang lalu By DDD

Assassin's Creed Shadows - Cara Mencari Orang Panda

1 bulan yang lalu By DDD

<🎜>: Rails Dead - Cara Melengkapkan Setiap Cabaran

3 minggu yang lalu By DDD

Tunjukkan Lagi

Alat panas

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Tunjukkan Lagi

Topik panas

Di manakah pintu masuk log masuk untuk e-mel gmail?

7628

15

Tutorial CakePHP

1389

52

Apakah format nama akaun stim

89

11

kunci pengaktifan win11 kekal

70

19

Sambungan NYT menunjukkan dan jawapan

31

141

Tunjukkan Lagi