JS之无缝滚动

发表于 | 分类于

每一个网站中无缝滚动是常用到的一个特效，自己写了一个简单的无缝滚动（最简单的那种）；
代码如下：

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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
<html>
<head>
<title></title>
<meta charset="utf-8">
<style>
*{
	margin:0;
	padding:0;
}
#div1{
	width:712px;
	height:108px;
	margin:100px auto;
	position:relative;
	overflow:hidden;
}
#div1 ul{
	position:absolute;
	left:0;
	top:0;
}
#div1 ul li{
	width:178px;
	height:108px;
	list-style-type:none;
	float:left;
}
</style>
<script>
window.onload=function(){
	var oDiv=document.getElementById('div1');
	var oUl=oDiv.getElementsByTagName('ul')[0];
	var aLi=oUl.getElementsByTagName('li');
	
	oUl.innerHTML=oUl.innerHTML+oUl.innerHTML;
	
	oUl.style.width=aLi[0].offsetWidth*aLi.length+'px';
	
	setInterval(function(){
		if(oUl.offsetLeft<-oUl.offsetWidth/2)
		{
			oUl.style.left='0';
		}
		oUl.style.left=oUl.offsetLeft-1+'px';
	},30);
	
};
</script>
</head>
<body>
	<div id="div1">
		<ul>
			<li><img src="images/1.jpg"/></li>
			<li><img src="images/2.jpg"/></li>
			<li><img src="images/3.jpg"/></li>
			<li><img src="images/4.jpg"/></li>
		</ul>
	</div>
</body>
</html>
Fork me on GitHub