<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{margin:0; padding:0;}
.outer{800px; height:400px; overflow:hidden; margin:0 auto;}
.inner{3200px; height:400px; position:relative;}
.inner ul{ position:absolute; left:0; top: 0;}
.inner ul li{ float:left;}
.inner ul li img{ 800px; height:400px;}
</style>
<script src="jquery-2.2.2.min.js"></script>
<script>
$(function(){
var num = -800;//向左走 每次定时器加这个值
setInterval(function(){
var num1 = $(".inner > ul").position().left + num;
if(num1 == -3200)
{
num1 = 0;
}
$(".inner > ul").animate({"left":num1},500)
}, 2000)
})
</script>
</head>
<body>
<div class="outer">
<div class="inner">
<ul>
<li><img src="img/292321.jpg" height="768" width="1366" alt=""></li>
<li><img src="img/292323.jpg" height="768" width="1366" alt=""></li>
<li><img src="img/292325.jpg" height="768" width="1366" alt=""></li>
<li><img src="img/292326.jpg" height="768" width="1366" alt=""></li>
<li><img src="img/292321.jpg" height="768" width="1366" alt=""></li><!--添加了一张图-->
</ul>
</div>
</div>
<div class="lll"></div>
</body>
</html>
主要思想当图片不断的减减 走到第4张的时候，还要向后面走，再走就没有了，所以在最后面一张添加了第一张图， 这个时候开始位置-2400 判断如果到-2400第4张的时候，让left等于0也就是开始位置