<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>
