Javascript学习之无缝滚动
无缝滚动Javascript：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <style type="text/css"> 7 *{margin:0; padding: 0;} 8 .div1{position: relative; height: 132px; width: 680px;border:1px solid black;margin:10px auto;overflow: hidden;} 9 .div1 ul {position: absolute;} 10 .div1 ul li{list-style: none;float: left;width: 150px; height: 112px;padding: 10px;} 11 .div1 ul li img{width: 150px; height: 112px;} 12 </style> 13 <script type="text/javascript" src="move.js"></script> 14 <script type="text/javascript"> 15 window.onload = function(){ 16 var oDiv= document.getElementById("div1"); 17 var oUl = getByClass(oDiv,"ul1")[0]; 18 var oLi = oUl.getElementsByTagName('li'); 19 var oA = document.getElementsByTagName("a"); 20 var iSpeed = 1;//设置速度 21 var timer = null;//定时器 22 23 oUl.innerHTML += oUl.innerHTML;//复制一份Ul,和原来的叠加在一起 24 oUl.style.width = oLi.length * oLi[0].offsetWidth + "px";//设置Ul的宽度 25 //alert(oLi.length * 170); 26 27 timer = setInterval(fnMover,30);//页面加载完成就开始滚动 28 oA[0].onclick = function(){//点击向左滚动，改变速度为负值 29 iSpeed = -1; 30 } 31 oA[1].onclick = function(){//点击向右滚动，改变速度为正值 32 iSpeed = 1; 33 } 34 oDiv.onmouseover = function(){//鼠标经过，停止滚动 35 clearInterval(timer); 36 } 37 oDiv.onmouseout = function(){//鼠标离开，继续滚动 38 timer = setInterval(fnMover,30); 39 } 40 //滚动的函数 41 function fnMover(){ 42 if(oUl.offsetLeft < -oUl.offsetWidth/2){//如果当前Left的值小于负的宽度的一半，那么，小Left的值为0 43 oUl.style.left =0; 44 }else if(oUl.offsetLeft > 0){//如果当前Left的值大于0；那么，让Left的值为负的宽度的一半 45 oUl.style.left = -oUl.offsetWidth/2 +"px"; 46 } 47 48 oUl.style.left = oUl.offsetLeft +iSpeed + "px";//Left的值等于当前Left加速度 49 50 51 } 52 }; 53 function getByClass(obj,sClass){//用Class获取元素 54 var aEle = document.getElementsByTagName("*");//获取所有的元素 55 var i=0; 56 var aResult = []; 57 for(i=0;i<aEle.length;i++){ 58 if(sClass == aEle[i].className){//如果当前元素等于数组中的一个元素，那么取出来放在数组aResult中 59 aResult.push(aEle[i]); 60 } 61 } 62 return aResult; 63 } 64 </script> 65 </head> 66 <body> 67 <a href="javascript:;"><-</a> 68 <a href="javascript:;">-></a> 69 <div class="div1" id="div1"> 70 <ul class="ul1"> 71 <li><img src="image/item1.jpg"></li> 72 <li><img src="image/item2.jpg"></li> 73 <li><img src="image/item3.jpg"></li> 74 <li><img src="image/item4.jpg"></li> 75 <li><img src="image/item5.jpg"></li> 76 <li><img src="image/item6.jpg"></li> 77 <li><img src="image/item7.jpg"></li> 78 </ul> 79 </div> 80 </body> 81 </html>
