Analyse des Prinzips von jQuery zur Erzielung des Drehtüreffekts von images_jquery

In diesem Artikel wird das Prinzip von jQuery analysiert, um den Drehtüreffekt von Bildern zu erzielen. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

Hier erklären wir nur den horizontalen Drehtüreffekt, nicht den vertikalen Drehtüreffekt nach oben. Das Prinzip ist das gleiche, aber es gibt eine kleine Gefahr beim horizontalen Drehtüreffekt. Werde es später erklären

Geben Sie zunächst den Code ein:

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

In

ist ein weiteres Div enthalten und eine sehr große Breite ist eingestellt, um eine Grube zu lösen, die unter der vertikalen Drehtür nicht vorhanden ist. Der Effekt dieser Grube besteht darin, dass das letzte Bild in der Anzeige nach dem Bildkarussell von unten nach oben springt, wenn der Li-Tag-Float übrig bleibt, weil Wenn das Die Breite des übergeordneten Elements reicht nicht aus, die folgenden Elemente sinken automatisch nach unten und nach links. Sobald die obere Breite ausreicht, schweben sie automatisch nach oben, sodass das letzte Bild in der Anzeige springt Verschachteln Sie ein DIV und legen Sie den Überlauf-CSS-Stil von

fest, um dieses Problem zu lösen.

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

Skript:

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

Wie üblich wird hier die Animationseffektfunktion animate von jquery verwendet, um den Drehtüreffekt zu erzielen, und sie wird mit der appendTo-Funktion kombiniert, um den Effekt einer endlosen Wiedergabe zu erzielen.

Informationen zur Funktion von appendTo finden Sie in der API-Dokumentation von jquery und zu animate finden Sie in der API-Dokumentation

Leser, die an weiteren Inhalten zu jQuery-Spezialeffekten interessiert sind, können sich die Spezialthemen auf dieser Website ansehen: „Zusammenfassung der Verwendung von jQuery-Animationen und Spezialeffekten“ und „Zusammenfassung gängiger Klassiker jQuery-Spezialeffekte"

Ich hoffe, dass dieser Artikel allen in der jQuery-Programmierung hilfreich sein wird.