20180114222412874.png
20180114222302307.png
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{
padding:0;
margin:0;
}
ul,ol{
list-style: none;
}
.box{
width: 278px;
height:78px;
border:1px solid #333;
margin:50px auto;
position: relative;
overflow: hidden;
}
.box .unit{
width:300px;
/*高度要足够高*/
height:9999px;
position: absolute;
top:0px;
left:0px;
}
.box .unit li{
float: left;
width:78px;
height:78px;
margin-right: 22px;
margin-bottom: 10px;
}
</style>
</head>
<body>
<div class="box">
<ul class="unit" id="unit">
<li><img src="images/mingxing/0.jpg" alt=""></li>
<li><img src="images/mingxing/1.jpg" alt=""></li>
<li><img src="images/mingxing/2.jpg" alt=""></li>
<li><img src="images/mingxing/3.jpg" alt=""></li>
<li><img src="images/mingxing/4.jpg" alt=""></li>
<li><img src="images/mingxing/5.jpg" alt=""></li>
<li><img src="images/mingxing/6.jpg" alt=""></li>
<li><img src="images/mingxing/7.jpg" alt=""></li>
<li><img src="images/mingxing/8.jpg" alt=""></li>
</ul>
</div>
<script type="text/javascript" src="js/jquery-1.12.3.min.js"></script>
<script type="text/javascript">
// 获取元素
var $unit = $("#unit");
var amount = $unit.children().length;
// console.log(amount);9
// 信号量
var idx = 0;
// 克隆前三张图片追加到unit的最后
$unit.children("li:lt(3)").clone().appendTo($unit);
// 先拉动再验证
var timer = setInterval(function(){
// 信号量改变
idx ++;
$unit.animate({"top":-88 * idx},600,function(){
// 验证
if(idx > amount/3 - 1){
idx = 0;
// 瞬移
$unit.css("top",0);
}
});
},2600);
</script>
</body>
</html>
