1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>无标题文档</title> 6 <style> 7 *{padding:0; margin:0;} 8 ul{ list-style:none;} 9 #div{ width:300px; height:100px; margin:100px auto; border:1px solid #ff0000; position:relative; overflow:hidden;} 10 #div ul{ position:absolute; height:100px; left:0;} 11 #div ul li{ width:300px; height:100px; line-height:100px; text-align:center; float:left} 12 </style> 13 <script> 14 window.onload=function(){ 15 var oDiv=document.getElementById("div"); 16 var oUl=oDiv.getElementsByTagName("ul")[0]; 17 var oLi=oUl.getElementsByTagName("li"); 18 var oInput=document.getElementsByTagName('input'); 19 oUl.innerHTML +=oUl.innerHTML; 20 oUl.style.width=oLi[0].offsetWidth*oLi.length+"px"; 21 var iSeep=-2; 22 var tamer=null; 23 24 25 clearInterval(tamer); 26 function starMove(){ 27 tamer=setInterval(function(){ 28 29 oUl.style.left=oUl.offsetLeft+iSeep+"px"; 30 if(-oUl.offsetLeft >= oUl.offsetWidth/2){ 31 oUl.style.left="0px"; 32 }else if(oUl.offsetLeft>0){ 33 oUl.style.left=-oUl.offsetWidth/2+"px"; 34 } 35 },30) 36 } 37 starMove(); 38 oDiv.onmouseover=function(){ 39 clearInterval(tamer); 40 } 41 oDiv.onmouseout=function(){ 42 starMove(); 43 } 44 oInput[0].onclick=function(){ 45 iSeep=-2; 46 } 47 oInput[1].onclick=function(){ 48 iSeep=2; 49 } 50 } 51 </script> 52 </head> 53 54 <body> 55 <input type="button" value="左"> 56 <input type="button" value="右"> 57 <div id='div'> 58 <ul> 59 <li>1</li> 60 <li>2</li> 61 <li>3</li> 62 <li>4</li> 63 </ul> 64 </div> 65 </body> 66 </html>
142
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
