效果图如下：
一、HTML代码
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
<body>
<div
id="container">
<ul
id="content">
<li><a
href="#"><img
src="images/0.png"/></a></li>
<li><a
href="#"><img
src="images/1.png"/></a></li>
<li><a
href="#"><img
src="images/tewu.png"/></a></li>
<li><a
href="#"><img
src="images/2.png"/></a></li>
<li><a
href="#"><img
src="images/tewu.png"/></a></li>
<li><a
href="#"><img
src="images/3.png"/></a></li>
<li><a
href="#"><img
src="images/4.png"/></a></li>
</ul>
</div>
</body>
|
1. id为container的div是最外层的包装，用来控制滚动区域显示的具体位置。
2. id为content的ul用来包装那些需要滚动的图片。
3. li元素就是用来包装具体的图片。
二、CSS代码
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
|
*{margin:
0; padding:
0;}
img{ border:0;
} #container{
width:800px;
height:
130px;
<span style="white-space:pre"> </span>margin:100px
auto;
border:3px
solid blue;
overflow:
hidden;
position:
relative;
} #container ul{
list-style:
none;
width:10000px;
position:
absolute;
} #container ul li{
float:left;
margin-right:
20px;
} |
这里说明一点，ul 的 width为什么设置为10000px。 因为无缝连续滚动的实现原理，就是在现有显示图片的基础上克隆一份，并且拼接在显示图片的后面，但由于显示图片的总宽度是未知的，所以为了安全性，最好将ul的width宽度设置比较大些。
三、无缝连续滚动原理分析
四、JQuery实现代码
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
|
<script type="text/javascript">
/* window.onload比 $(function(){}) 加载的更晚一些，这样那些宽度的计算在Chrome中就可以准确计算了*/ window.onload =
function(){
/*计算一个segment的宽度*/ var
segmentWidth = 0;
$("#container #content li").each(function(){
segmentWidth+= $(this).outerWidth(true);
});
$("#container #content li").clone().appendTo($("#container #content"));
run(6000);
function
run(interval){
$("#container #content").animate({"left":-segmentWidth},
interval,"linear",function(){
$("#container #content").css("left",0);
run(6000);
});
}
$("#container").mouseenter(function(){
$("#container #content").stop();
}).mouseleave(function(){
var
passedCourse = -parseInt($("#container #content").css("left"));
var
time = 6000 * (1 - passedCourse/segmentWidth);
run(time);
});
};
</script> |
1. 先通过each遍历所有的li元素，计算出它们宽度之和。
2. 拷贝一份图片到现有图片的后面，原理分析图的"图一"所示。
3. 设置6秒钟滚动完界面上面现有的图片，滚动完毕后，通过设置content的left值，将其整体拉回到初始状态，原理分析图的"图二"所示。然后递归调用run方法，完成无限滚动。
4. 当鼠标经过滚动区域的时候，动画立刻停止; 当鼠标离开的时候，动画继续执行。
关于动画继续执行的代码，如下图分析：
