<!DOCTYPE html>
<html lang="zh-CN"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<style>
.big-big-div{
width: 100%;
overflow:hidden;
}
.big-div{
margin-left:0;
position: relative;
width: 4050px;
height: 400px
}
.small-div{
display: inline-block;
height: 400px;
width: 390px;
margin-left: 10px;
}
</style>
<body>
<div>
<div class="big-big-div">
<div class="big-div">
<div class="small-div" style="background-color: yellow"></div>
<div class="small-div" style="background-color: red"></div>
<div class="small-div" style="background-color: saddlebrown"></div>
<div class="small-div" style="background-color: #adadad"></div>
<div class="small-div" style="background-color: deeppink"></div>
<div class="small-div" style="background-color: tan"></div>
<div class="small-div" style="background-color: teal"></div>
<div class="small-div" style="background-color: thistle"></div>
<div class="small-div" style="background-color: yellow"></div>
<div class="small-div" style="background-color: yellowgreen"></div>
</div>
</div>
</div>
</body>
<script src="_INDEX_/jquery-3.4.1/jquery-3.4.1.js"></script>
<script>
$(function () {
//超長div 每2秒向左移動400px 移動到第6次後就重新開始
setInterval(function(){
var res = parseInt($(".big-div").css("margin-left"));
$(".big-div").animate({
'margin-left':res>-2430 ? res-405 : 0
});
},2000);
})
</script>
</html>
效果圖：
沒移動：
第一次移動：
第二次移動：
以此類推，直到第七次會重頭開始......