The principle analysis of the image merry-go effect of jquery _jquery

This paper analyzes the principle of jquery to realize the merry-go effect of picture. Share to everyone for your reference, specific as follows:

Here only explain horizontal merry-go effect, vertical upward merry-go effect does not explain, the principle is same, but horizontal merry-go effect has a small pit. I'll explain later.

First code:

Html:

<div class= "box" >  
  <div style= "width:1000px" id= "Boxdiv" >
   <ul>
    <li style= "display : Block; "title=" Qing ling girl Like a Dream fairy "><a href=" # ">
     </a ></li>
    <li title= "Beauty Seaside sexy perspective outfit Temptation" ><a href= "#" >
     </a></li>
    <li title=" Xia Xiaowi: Change little witch to sexy digital baby "><a href=" # ">
     </a></li>
    <li title= "夏小薇 incarnation" Kill the Wolf "pink demon 姬鲜 Tender Desire Drops" ><a href= "#" >
     </a></li>
   </ ul>
  </div>
</div>

In the <div class= "box" >, a div is included and a relatively large width is set to solve a hole that is not in the vertical merry-go. The effect of the pit is in the case of the Li label float as left, do not inside the Div, will appear after the picture carousel, the display of the last picture from the bottom up of the beating effect, this is the characteristics of float itself, because the parent element is not wide enough, the following elements will automatically sink down the left, Once the above width is enough, will automatically float up, this drift will cause the last picture in the display of the beat effect, so the internal nesting of a div and set <div class= "box" > Overflow CSS style to solve the 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;//Minimum display number this   
 . Timer = 2000;//Timer interval time this
 . UL = $ (". Box ul");
 var handid;//timer 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"}, S, function () {
   //appendto function is the secret to achieve merry-go uninterrupted playback.
   //Current online see a lot of merry-go, go to the last one, will immediately flash back to the first, rather than continue to move forward from behind, that is not understand the role of the function of the reason
   $ (this). CSS ("Margin-left", "Auto"). Appendto (self. Ul);
  }
</script>

This is the usual use of jquery animation effect function animate to achieve merry-go effect, and with the Appendto function to achieve the effect of endless playback.

For appendto functions See the jquery API documentation, animate also see the API documentation

More about jquery effects related content readers can view the site topics: "jquery animation and special effects usage Summary" and "jquery Common classic Effects Summary"

I hope this article will help you with the jquery program design.