<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
<style>
*{margin: 0; padding: 0;}
img{
border:0;
}
.container{
width:1560px;
height: 280px;
margin:0 auto;
border:3px solid blue;
overflow: hidden;
position: relative;
}
.container ul{
list-style: none;
width:10000px;
position: absolute;
}
.container ul li{
float:left;
margin-right: 20px;
}
</style>
</head>
<body>
<div class="container">
<ul class="content">
<li><a href="#"><img src="1.jpg"/></a></li>
<li><a href="#"><img src="2.jpg"/></a></li>
<li><a href="#"><img src="3.jpg"/></a></li>
<li><a href="#"><img src="4.jpg"/></a></li>
<li><a href="#"><img src="5.jpg"/></a></li>
</ul>
</div>
<script>
jQuery(document).ready(function($) {
var allWidth=0
//先通过each遍历所有的li元素，计算出它们宽度之和。
$(".content li").each(function() {
allWidth+=$(this).outerWidth(true);
});
//拷贝一份图片到现有图片的后面
$(".content li").clone().appendTo($(".content"));
run(8000);
function run(interval){
$(".content").animate({
'left': -allWidth},
interval,"linear", function() {
$(".content").css('left', 0);
run(8000);
});
}
$(".container").mousemove(function(){
$(".content").stop();
}).mouseout(function(){
var passedCourse = -parseInt($(".content").css("left"));
var time = 8000 * (1 - passedCourse/allWidth);
run(time);
});
});
</script>
</body>
</html>
