JS implementation of the picture interval cycle carousel and no interval of cyclic carousel

Link Address: http://blog.sina.com.cn/s/blog_75cf5f32010199dn.html

Recently made a picture of the function of cyclic carousel. It's just a couple of pictures that are constantly scrolling through the display.

This is a good method, so take note of the implementation process: picture interval cycle Carousel:1, HTML inside the picture to be carried out with a container wrapped up, with JS to control the container rolling, of course, the outermost container to set Overflow:hidden; 2, the CSS inside control the position of this container, the implementation of scrolling will need to use the positioning. 3, JS inside the use of jquery animate animation function to achieve scrolling. JS: var ptop =-100; function Ceshi () {$ (' #cesji. P1 '). Animate ({top:ptop}, {duration:400,complete:function () {ptop = ptop-106;if (Ptop = = -524) {ptop = 6;$ (' #cesji. P1 '). css (' top ', ' 112px ');}} });} var qinghcu = setinterval (Ceshi, 3000);   loop Carousel without interval:There is no interval of cyclic rotation and the interval of the cycle of rotation is similar, but the timer is not the interval how often to move once, but to execute a second immediately after execution, here we'd better use the timeout timer settimeout () method. The timer is called again in the function body that executes once and then executes again, so that the function that executes the move is called constantly, thus moving continuously ....Use the Juqery animation:var sudu = 3;var Hzmtqingchu;function Ceshi () {$ ('. Aa2 '). Animate ({Left:sudu}, {duration:120,complete:function () {Sudu = Sudu + 3;if (Sudu = =) {//alert (' a ');Sudu = 3;$ ('. Aa2 '). CSS (' left ', ' 3px ');}Hzmtqingchu = SetTimeout (Ceshi);//The Move function is called again after the target has been moved}});} Hzmtqingchu = SetTimeout (Ceshi);Original Ecological instance:var sudu = 1;var Hzmtqingchu;function Ceshi () {$ ('. AA '). css (' left ', Sudu);Sudu = Sudu + 1;if (Sudu = =) {$ ('. AA '). css (' left ', ' 1 ');Sudu = 1;}Hzmtqingchu = SetTimeout (Ceshi);//The Move function is called again after the target has been moved}  Hzmtqingchu = SetTimeout (Ceshi);The position of the picture here is a bit tricky, if we display three pictures in this container, but a total of 5 pictures of the carousel, below to see the location of the square: 5, [1, 2, 3], 4,5,1, 2
5, 1, [2, 3, 4],5,1, 2
5, 1, 2, [3, 4, 5],1,2
5,1,2,3[4, 5, 1], 2, 5,1,2,3,4[5,1,2] ==> this time to change the first state of the surface [5, 1, 2], 3, 4,5,1, 2 [back to the beginning of the state]

[] The 3 images shown inside the brackets represent your container

JS implementation of the picture interval cycle carousel and no interval of cyclic carousel