Principle analysis of jQuery to achieve picture revolving door effect_jquery

This article analyzes the principle of jQuery to achieve the revolving door effect of images. Share it with everyone for your reference, the details are as follows:

Here we only explain the horizontal revolving door effect, not the vertical upward revolving door effect. The principle is the same, but there is a small pitfall in the horizontal revolving door effect. Will explain later

First enter the code:

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>

In 8f9e4409b06fde1ff1d3a80f075ca0ed, another div is included, and a very large width is set to solve a pit that does not exist under the vertical revolving door. The effect of this pit is that when the li tag float is left, without the DIV inside, the last picture in the display will jump from bottom to top after the picture carousel. This is caused by the characteristics of float itself, because When the width of the parent element is not enough, the following elements will automatically sink down and to the left. Once the upper width is enough, they will automatically float up. This floating will cause the last picture in the display to jump, so the internal Nest a DIV and set the overflow CSS style of 8f9e4409b06fde1ff1d3a80f075ca0ed to solve this problem.

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:

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

As usual, jquery’s animation effect function animate is used here to achieve the revolving door effect, and it is combined with the appendTo function to achieve the effect of endless playback.

For the function of appendTo, please refer to the API documentation of jquery, and for animate, please refer to the API documentation

Readers who are interested in more content related to jQuery special effects can check out the special topics on this site: "Summary of jQuery animation and special effects usage" and "Summary of common classic jQuery special effects"

I hope this article will be helpful to everyone in jQuery programming.