Ideas:
Assign all Li, add to UL end, recalculate ul width
Each time a fixed value is moved, when it exceeds half, the UL is pulled back to its original position
The following code
<! DOCTYPE html>{margin:0; padding:0; } img{Display:block; } ul,li{List-Style:none; } #box {width:440px; height:88px; margin:50px Auto; BORDER:3PX solid #DCDCDC; position:relative; Overflow:hidden; } #list {Position:absolute; } #list li{float: Left; width:88px; height:88px; } </style> <script src= "Http://libs.baidu.com/jquery/2.0.0/jquery.min.js" ></script> <SCRI PT type= "Text/javascript" > $(function(){ //The content of the UL is copied and added to the UL,$ (' #list '). Append ($ (' #list ')). HTML ()); //change the length of a list$ (' #list '). Width ($ (' #list li '). EQ (0). Width () * $ (' #list Li '). Length) setinterval (move,10) }) varx = 0;//length of each move functionMove () {//interpretation over the half of the UL, pull it back and start again if(x <=-($ (' #list '). Width ()/2)) {x = 0; } $(' #list '). CSS (' left ', x) x-=1; } </script> Jqery Seamless scrolling effect