//-----------------------使用offset属性完成无缝滚动的图片列和其配套的功能
1 <html>
2 <head><title>rollOver</title></head>
3 <style type="text/css">
4 img,div,li,ul{margin: 0px;padding: 0px;}
5 img{width: 140px;height: 170px;float: left;margin-left: 10px;margin-top: 10px;border: 1px solid gray;}
6 li{list-style-type: none;}
7 #box{width: 460px;height: 190px;background: pink;overflow: hidden;left:;top: 150px;position: absolute;}
8 #roll{position: absolute;left: 0px;width: 460px;}
9 </style>
10 <script type="text/javascript">
11 window.onload=function(){
12 var direction=-2;
13 var nowDirection;
14 var i;
15 var timeout;
16 oBtn=document.getElementById(‘direction‘);
17 oPause=document.getElementById(‘pause‘);
18 oImg=document.getElementsByTagName(‘img‘);
19 oDiv=document.getElementById(‘roll‘);
20 oBox=document.getElementById(‘box‘);
21 oBox.style.left=(screen.width-parseInt(oBox.offsetWidth))/2+‘px‘;
22 oDiv.style.width=(oImg[0].offsetWidth+10)*oImg.length+‘px‘;
23 oBtn.onclick=function(){
24 direction=-direction;
25 }
26 oPause.onclick=function(){
27 if(direction!=0){nowDirection=direction;direction=0;}
28 else direction=nowDirection;
29 }
30 for(i=0;i<oImg.length;i++){
31 oImg[i].onmouseover=function(){
32 if(direction) nowDirection=direction;
33 direction=0;
34 this.style.width="200px";
35 this.style.border="5px solid gray";
36 clearTimeout(timeout);
37 }
38 oImg[i].onmouseout=function(){
39 timeout=setTimeout(function(){direction=nowDirection;},200);
40 this.style.border="1px solid gray"
41 this.style.width="140px"
42 }
43 }
44 var timer=setInterval(function(){
45 oDiv.style.left=(oDiv.offsetLeft+direction)+‘px‘;
46 if(oDiv.offsetLeft<(-oDiv.offsetWidth/2))
47 oDiv.style.left=0+‘px‘;
48 if(oDiv.offsetLeft>0)
49 oDiv.style.left=-oDiv.offsetWidth/2+‘px‘;
50 },10);
51 }
52 </script>
53 <body>
54
55 <div id="box">
56 <div id="roll">
57 <ul>
58 <li><img src="pic/pic1.jpg"></li>
59 <li><img src="pic/pic2.jpg"></li>
60 <li><img src="pic/pic3.jpg"></li>
61 <li><img src="pic/pic4.jpg"></li>
62 <li><img src="pic/pic1.jpg"></li>
63 <li><img src="pic/pic2.jpg"></li>
64 <li><img src="pic/pic3.jpg"></li>
65 <li><img src="pic/pic4.jpg"></li>
66 </ul>
67 </div>
68 </div>
69 <div>
70 <input type="button" value="reverse" id="direction">
71 <input type="button" value="pause" id="pause">
72 </div>
73
74 </body>
75 </html>
时间： 2024-12-29 12:56:39