<html> <head> <base href="http://keleyi.com"> <title></title><base target="_blank" /> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script> <style> *{ margin:0; padding:0;} #photo-list{ width:980px; height:400px; margin:0 auto; overflow:hidden;} ul{ width:9999px; height:400px;} ul li{height:400px;width:980px; display:inline-block;list-style-type:none; float:left;} .one{ background:#f0b8b8;} .two{ background:#eef0b8;} .three{ background:#b8f0d7;} .fore{ background:#b8e1f0;} </style> </head> <body> <div id="photo-list"> <ul id="scroll"> <li class="one"></li> <li class="two"></li> <li class="three"></li> <li class="fore"></li> </ul> </div> <script> $(function () { var c = $(‘#photo-list‘); var ul = $(‘#scroll‘), itemCount = $("li").length, width = $("li").width(), //获得每个img容器的宽度 scrollLeft = 0, marquee = function () { c.scrollLeft(scrollLeft); scrollLeft += 2; if (scrollLeft % width <= 1) { //当 c.scrollLeft 和 width 相等时，把第一个img追加到最后面 var htm = $("li").first().clone(); ul.append(htm); $("li").first().remove(); scrollLeft = 0; }; }, speed = 20; //数值越大越慢 $(‘#scroll‘).width(width * itemCount + ‘px‘); //加载完后设置容器长度 var timer = setInterval(marquee, speed); }) </script> </body> </html>
原文：http://www.cnblogs.com/wwqianduan/p/3542603.html