/
无缝滚动.html
86 lines (79 loc) · 1.46 KB
/
无缝滚动.html
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
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
<!Doctype>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题</title>
<style>
*{
margin: 0;
padding: 0;
}
#div1{
position: relative;
border: 1px solid black;
width: 680px;
height: 132px;
margin: 10px auto;
overflow: hidden;
}
#div1 ul{
position: absolute;
}
#div1 ul li{
list-style: none;
float: left;
width: 150px;
height: 112px;
padding: 10px;
}
#div1 ul li img{
width: 150px;
height: 112px;
}
</style>
</head>
<body>
<a id="a1" ><</a>
<a id='a2' >></a>
<div id="div1">
<ul>
<li><img src="images/1.jpg" alt=""></li>
<li><img src="images/2.jpg" alt=""></li>
<li><img src="images/3.jpg" alt=""></li>
<li><img src="images/4.jpg" alt=""></li>
</ul>
</div>
</body>
<script>
window.onload=function (){
var oDiv=document.getElementById('div1');
var oUl = oDiv.getElementsByTagName('ul')[0];
var aLi = oUl.getElementsByTagName('li');
var oA = document.getElementsByTagName('a');
var timer = null;
var iSpeed = -5;
oUl.innerHTML+=oUl.innerHTML;
oUl.style.width=aLi.length*aLi[0].offsetWidth+'px';
oA[0].onclick=function()
{
iSpeed=-8;
}
oA[1].onclick=function()
{
iSpeed=8;
}
timer=setInterval(function()
{
if(oUl.offsetLeft<-oUl.offsetWidth/2)
{
oUl.style.left=0;
}
else if(oUl.offsetLeft>0)
{
oUl.style.left=-oUl.offsetWidth/2;
}
oUl.style.left=oUl.offsetLeft+iSpeed+'px';
},30);
}
</script>
</html>