Jquery Picture Merry Effect principle

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

As usual, first on the code:

Html:

<Divclass= "box">                <Divstyle= "width:1000px;"ID= "Boxdiv">            <ul>                <Listyle= "Display:block;"title= "Civil aircraft in the Sunset "><ahref="#">                    <imgsrc= "Http://5.26923.com/download/pic/000/337/f2418c0850058ff9edb2bb85e30be1cb.jpg" /></a></Li>                <Lititle= "Boeing 787"><ahref="#">                    <imgsrc= "Http://5.26923.com/download/pic/000/337/8d96f0fc8a9f2f9e5af628ec4b9ef64e.jpg" /></a></Li>                <Lititle= "Go on a trip together"><ahref="#">                    <imgsrc= "Http://5.26923.com/download/pic/000/338/14533ca737e6b63c0abe3ee4dc22b6a4.jpg" /></a></Li>                         </ul>        </Div>    </Div>

In <Div class= "box"> , a div is included, and a very large width is set. is to solve a hole that is not in the vertical merry. The effect of the pit is in the Li label float for left case, do not inside the Div, will appear after the picture carousel, display the last picture from the bottom up the beating effect, which is float Due to its own characteristics, because the parent element width is not enough, the following elements will automatically go down to the left, once the above width is enough, it will automatically float up, this floating will cause the display of the last picture of the beating effect, so the use of internal nested a DIV and set up < 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 () {            NewZouma ().        Start ();        }); functionZouma () { This. maxLength = 3;//Minimum display number             This. Timer = 2000;//Timer interval Time             This. UL = $ (". Box ul"); varHandid;//Timer ID            varSelf = 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 () {                varimg = self. Ul.children (). EQ (0); varleft = Img.children (). EQ (0). width (); Img.animate ({"MarginLeft": ( -1 * left) + "px"}, 600,function () {                    //the Appendto function is the secret to achieving merry uninterrupted playback.                     //at present, many merry seen on the internet, go to the last one, will immediately flash back to the first, rather than continue to move forward from the back, that is not understand the function of the role of the reason$( This). CSS ("Margin-left", "Auto"). AppendTo (self.                UL);            }); }        }    </script>

This is the usual use of the jquery animated function animate to achieve the merry effect, and with the appendTo function to achieve the effect of endless play.

For appendTo functions See the jquery API documentation, Animate also refer to the API documentation

Jquery Picture Merry Effect principle