This article mainly introduces very smooth JS picture scrolling effect code, seamless cycle, speed can be customized, we refer to the use of the bar
Idea: A group of pictures control its scroll scroll and then copy the group of pictures and add into the original picture group, now have two sets of pictures. As you can imagine, now that the scroll bar continues to scroll, the last picture of that group of pictures has been rolled to the top and disappeared, and the first copy of the picture appears after the last picture in the original image, and you can feel the seamless scrolling. The code is as follows: <! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <html xmlns=" http://www.w3.org/1999/xhtml "> <head> <meta http-equiv=" Content-type " Content= "text/html; Charset=utf-8 "/> <title>js picture left scroll </title> <style type=" Text/css "> img{ border:none; } </style> </head> <BODY&G T <div id= "Demo" style= "overflow:hidden;width:500px;" > <table border=0 align=center cellpadding=1 cellspacing=1 cellspace=0 > <tr> & nbsp <TD id= "Demo1" valign= "Top" bgcolor= "FFFFFF" > <!--special Note that the total width of the following picture must be greater than the width of the demo defined above. If the width of the demo above is 500px, the total width of the following picture must be greater than 500, otherwise there will be some problems! --> &NBSp <table border= "0" cellspacing= "0" cellpadding= "0" > &L T;TR align= "center" > <td><a href= "#" target= "_blank" ><img src = "Images/1.jpg" width= "height=" ></a></td> <td>& Lt;a href= "#" target= "_blank" ><img src= "images/2.jpg" width= "he" height= "></a></td> <td><a href= "#" target= "_blank" ><img src= "images/3.jpg" width= "150" height= "></a></td> <td><a href=" # "target=" _blank "><img src=" images/4.jpg "width=" height= "></a></td> nbsp <td><a href= "#" target= "_blank" ><img src= "images/5.jpg" width= "I" height= "" ></a></ td> </tr> </table> </td> <TD Id= "Demo2" valign= "Top" > </td> </tr> </table> </d iv> <div id= "msg" ></div> <script type= "Text/javascript" src= "Jquery.js" ></script> & nbsp <script type= "Text/javascript" > //0: Fixed speed var speed = 30; //1: Get element demo demo1 Demo2 var demo = $ ("#demo"); var demo1 = $ ("#demo1"); var Demo2 = $ ("#demo2"); //2: Copy demo1-->demo2 var cont = $ ("#demo1"). html (); $ ("#demo2"). HTML (cont); //3: Create method timed execution function hello () { var left = $ ("#demo"). ScrollLeft (); nbsp if (left >= $ ("#demo1"). Width ()) { left = 0 }else{ left++; } $ ("#demo"). S Crollleft (left); settimeout ("Hello ()", speed); &NBSp } Hello (); // mobile demo.scrollleft (); </script> </body> </html> Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
