<!DOCTYPE html>
<html>
<head>
<title>
滚动图片
</title>
<style type="text/css">
.imageBox{
height: 438px;
width: 960px;
overflow: hidden;
position:relative;
margin: auto;
}
.scrollContainer{
width: 4800px;
height: 438px;
padding: 0px;
position: absolute;
top: 0px;
left:0px;
}
.scrollImg{
width: 960px;
height: 435px;
}
.scrollContainer li{
float: left;
display: list-item;
}
.content{
margin: auto;
}
</style>
<meta charset="utf-8" />
<script type="text/javascript" src="jquery-3.1.1.min.js"></script>
</head>
<body>
<div class="content">
<div class="imageBox">
<ul class="scrollContainer">
<li>
<img class="scrollImg" src="http://www.gettyimagesgallery.com/Images/services/ph_01.jpg" />
</li>
<li>
<img class="scrollImg" src="http://www.gettyimagesgallery.com/Images/services/ph_02.jpg" />
</li>
<li>
<img class="scrollImg" src="http://www.gettyimagesgallery.com/Images/services/ph_03.jpg" />
</li>
<li>
<img class="scrollImg" src="http://www.gettyimagesgallery.com/Images/services/ph_04.jpg" />
</li>
<li>
<img class="scrollImg" src="http://www.gettyimagesgallery.com/Images/services/ph_01.jpg" />
</li>
</ul>
</div>
</div>
<script type="text/javascript">
var baseNum = 960;
var imgNum = 5, initNum = 0;
var interval = setInterval(function(){
if(initNum == imgNum){
initNum = 0;
$(".scrollContainer").css({"marginLeft" : "0px"});
}
$(".scrollContainer").animate({"marginLeft": -baseNum * initNum + "px"}, 1500);
initNum++;
}, 2000); </script>
</body>
</html>