<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{ padding: 0; margin: 0; } ul li{list-style-type: none} #banner{ width: 800px; height: 400px; overflow: hidden; } #banner ul{ width: 3600px; overflow: hidden; } #banner ul>li{ width: 800px; height: 400px; float: left; } img{ max-width: 100%; } </style> </head> <body> <div id="banner"> <ul> <li><img src="1.jpg" alt="" width="900px" height="400px"/></li> <li><img src="2.jpg" alt="" width="900px" height="400px"/></li> <li><img src="3.jpg" alt="" width="900px" height="400px"/></li> <li><img src="4.jpg" alt="" width="900px" height="400px"/></li> </ul> </div> <input type="button" value="left" class="left"/> <input type="button" value="right" class="right"/> <input type="text" id="clock" size="35" /> <script src="jquery.js"></script> <script> setTimeout("dong()",600); setInterval("dong()",2400); function dong() { $("#banner ul").animate({marginLeft:"-800px"},600, function () { $("#banner ul>li").eq(0).appendTo($("#banner ul")); $("#banner ul").css('marginLeft','0px'); }); } </script> </body> </html>