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>
View Code

 

posted @ 2013-12-19 09:50  泡沫幻想  阅读(229)  评论(0编辑  收藏  举报