<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Simple marquee effect</title> <style type="text/css"> #marquee2{ width:400px; /**Exceeding elements are hidden*/ overflow:hidden; background:#EFEFEF; /** The positioning is placed in the middle mainly so as not to be placed on the edge of the screen*/ position: absolute; left:200px; top:150px; } #marquee2 ul{ list-style: none; position: relative; left: auto; top: car; } # marquee2 ul li { float:left; padding:0 10px; line-height:25px; } </style> <script src="bower_components/jquery/dist/jquery.js"></script> <script type="application/javascript"> $(document).ready(function () { var marqueeWith = $('#marquee2').width(); var left = $('#marquee2 ul').width(); console.log(left); var animateTime = 5000; // time to move to end of #marquee2 width var resetTimeout = 10; //Let the ul element move the marqueeWith pixels in the animateTime $('#marquee2 ul').animate({'left': '-'+(marqueeWith)+'px'},animateTime); setInterval(function(){ console.log('a') //Make the ul element move outside the width of the parent element div within 10 milliseconds $('#marquee2 ul').animate({'left': marqueeWith +'px'},resetTimeout); setTimeout(function(){ $('#marquee2 ul').animate({'left': '-'+(marqueeWith)+'px'},animateTime); },resetTimeout); }, (animateTime + resetTimeout)); }) </script> </head> <body> <div id="marquee2" > <ul> <li> Content 1 </ li> <li> Content 2 </ li> <li> Content 3 </ li> <li> Content 4 </ li> <li><img src="http://ku.shouce.ren/libs/kxbdMarquee/img/02s.jpg" /></li> </ul> </div> </body> </html>