<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="base.css" /> <script type="text/javascript" src="jquery-1.10.1.min.js" ></script> </head> <body> <style> #roll{ width: 450px; height:112px; overflow: hidden; border: #4e83c2 solid 1px; margin:50px auto; } #roll ul{ width: 450px; height:100px;} #roll ul li{ float: left; width: 100px; height: 100px; border:#ccc solid 1px; display: block; margin: 5px;} </style> <div id="roll"> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> </ul> </div> <script> function rolling(){ $('#roll ul').animate({'margin-left':'-110px'},function(){ $('#roll ul li:eq(0)').appendTo($('#roll ul')); $('#roll ul').css({'margin-left':0}); }) } setInterval(rolling,1000); </script> </body> </html>
效果图: