<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#wrap{width: 500px;height: 300px;position: relative;overflow: hidden;}
#content{height: 300px;position: absolute;}
.div {height: 300px;float: left;}
#content img{width: 500px;}
</style>
<script src="js/jquery-3.1.0.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function() {
var $wrap = $('#wrap');
var $content = $('#content');
var $divs = $('.div');
var w = $divs.length*500
$content.css('width',w+'px');
var timer = setInterval(scroll,1000);
function scroll(){
$content.animate({left:'-=500'},1000,function(){
$(this).children().eq(0).appendTo($(this)); //把移動(dòng)的div凡在后邊
$(this).css('left',0);
setTimeout(scroll,1000) //setTimeout 需要自調(diào)用
}).delay(1000);
setTimeout(scroll,1000); //每次程序結(jié)束銷毀
}
});
</script>
</head>
<body>
<div id="wrap">
<div id="content">
<div class="div"><img src="img/1.jpg"/></div>
<div class="div"><img src="img/2.jpg"/></div>
<div class="div"><img src="img/3.jpg"/></div>
<div class="div"><img src="img/4.jpg"/></div>
<div class="div"><img src="img/5.jpg"/></div>
</div>
</div>
</body>
</html>
