极客观点
项目管理
HarmonyOS
【问题描述】：这是一个四张图片向左循环滚动动画，图片的尺寸是：width:400px; height:300px;
【问题1】：
为了实现图片播放到最后一张之后，自动再从第一张播放：
Math.abs($pos.left) >= 400 ，请问，为什么这里是>= 400 。四张图片不应该是1600吗？每张图片循环结束的时候都会产生一个400px的数值，这样不是每次都向ul的尾部添加一张图片吗？
【问题2】：
$('#one ul').append($('#one ul>li:first'));上述语句把第一张图片添加到ul的尾部，请问这样岂不是每次触发该if循环的时候都添加了第一张图片，这样不是加进去了很多第一张图片吗？如果每次都添加进去第一张图片，这不是让这个循环里面的图片越来越多了吗？谢谢
【问题3】
$('#one ul').css('left','0px');为什么要把偏移量设置为0px？
谢谢
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<title>jquery</title>
<script src="jquery-1.7.2.js"></script>
<style>
*{
margin:0px;
padding:0px;
list-style:none;
}
#one{
width:400px;
height:300px;
border:1px solid #f00;
position:relative;
overflow:hidden;
}
#one ul{
position:absolute;
left:0;
top:0;
width:1600px;
}
#one li{
float:left;
}
</style>
<script>
$(function(){
//使用定时器来完成自动滚动功能
setInterval(function(){
var $pos = $('#one ul').position();
//设置ul的位置
var $left = $pos.left-1 + 'px';
var $top = $pos.top + 'px';
$('#one ul').css({left:$left,top:$top});
//判断移动位置是否超过了单个图片的移动距离
if(Math.abs($pos.left) >= 400){
//将图片移动到ul最后
$('#one ul').append($('#one ul>li:first'));
$('#one ul').css('left','0px');
}
},10)
})
</script>
</head>
<body>
![图片描述][1]
</body>
</html>
后来发现这样写好像也能实现：（把触发if循环的条件变了一下,然后删掉后一句append），只是原问题还请再解答一下。谢谢