//-----------------------使用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{ 140px;height: 170px;float: left;margin-left: 10px;margin-top: 10px;border: 1px solid gray;} 6 li{list-style-type: none;} 7 #box{ 460px;height: 190px;background: pink;overflow: hidden;left:;top: 150px;position: absolute;} 8 #roll{position: absolute;left: 0px; 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>