思路：
赋值所有li，添加到ul末尾,重新计算ul宽度
每次移动一个固定的值，当超出一半时，将ul拉回原位
以下代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>无缝滚动</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
img{
display: block;
}
ul,li{
list-style: none;
}
#box{
width: 440px;
height: 88px;
margin: 50px auto;
border: 3px solid #DCDCDC;
position: relative;
overflow: hidden;
}
#list{
position: absolute;
}
#list li{
float: left;
width: 88px;
height: 88px;
}
</style>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
//将ul的内容复制一遍添加到ul中，
$(‘#list‘).append($(‘#list‘).html());
//改变list的长度
$(‘#list‘).width($(‘#list li‘).eq(0).width() * $(‘#list li‘).length)
setInterval(move,10)
})
var x = 0; //每次移动的长度
function move(){
//判读超过ul的一半，拉回来重新开始
if(x <= -($(‘#list‘).width()/2)){
x = 0;
}
$(‘#list‘).css(‘left‘,x)
x-=1;
}
</script>
</head>
<body>
<div id="box">
<ul id="list">
<li><img src="img/1.jpg" /></li>
<li><img src="img/2.jpg" /></li>
<li><img src="img/3.jpg" /></li>
<li><img src="img/4.jpg" /></li>
<li><img src="img/5.jpg" /></li>
</ul>
</div>
</body>
</html>
时间： 2024-10-13 09:55:45