JQuery is used to analyze the principle of the image drive lamp effect.

JQuery is used to analyze the principle of the image drive lamp effect.

This article analyzes the principle of jQuery to achieve the effect of image drive lights. We will share this with you for your reference. The details are as follows:

Here, we will only explain the effect of horizontal drive lights. The effect of vertical drive lights is not explained. The principle is the same, but there is a small pitfall in the effect of horizontal drive lights. Coming soon

First run the Code:

HTML:

<Div class = "box"> <div style = "width: 1000px;" id = "boxdiv"> <ul> <li style = "display: block; "title =" Qingling girl is like a dream fairy "> <a href =" # ">  </a> </li> <li title = "Beauty by the sea"> <a href = "#">  </a> </li> <li title = "xia Xiaowei: changing little magic girl becomes a sexy digital baby "> <a href =" # ">  </a> </li> <li title = "xia Xiaowei turned into" kill Wolf "Pink enchantress fresh to drip"> <a href = "#">  </a> </ li> </ul> </div>

In <div class = "box">, a div is included and a large width is set to solve a pitfall that is not found under the vertical drive lamp. The effect of this pitfall is when the float label of li is left. Do not use the DIV inside. After the image is carousel, the last image in the display will jump from bottom to top, this is caused by the characteristics of float, because when the width of the parent element is not enough, the following elements will automatically sink to the left, and once the width above is enough, it will automatically float up, this floating will cause the beating effect of the last image in the display. Therefore, this problem is solved by embedding a DIV internally and setting the overflow CSS style of <div class = "box">.

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; // the minimum number of displays this. timer = 2000; // Timer interval 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"}, 600, function () {// appendTo function is the secret to achieve uninterrupted playback of the drive lamp. // A lot of street lights are currently seen on the Internet. When we reach the last one, we will flash back to the first one instead of moving forward from the back, that is why the function is not understood ("margin-left", "auto "). appendTo (self. ul) ;}}}</script>

In this example, we use the animation effect function animate of jquery to implement the drive-down effect, and use the appendTo function to implement the endless playback effect.

For more information about the functions of the appendTo function, see the jquery API documentation. For more information about the animate function, see the API documentation.