JS无缝滚动

思路：

1、获取元素。

2、要使图片动起来就是用setInterval来改变，如往左边滚动就改变offsetLeft，把图片的左边距改为负数。

3、当图片往左滚的时候，右边就会出现空白，这时候需要用innerHTML复制原来的4个li 形成8个li

4、就算有8个li，但总会有滚到尽头的时候，这时就做一个判断当offsetLeft大于ul宽度的一半时，把ul拉回来0的位置（往左滚）。

5、当offsetLeft大于0时，就把Left设置为负ul 宽度的一半。（往右滚）

6、鼠标指向图片，图片停止。

7、鼠标离开图片，图片继续滚动。

8、往左滚 往右滚就是控制offsetLeft，负数就是向左滚，正数就是向右滚。

 

JS代码：

 1 <script>
 2 window.onload=function()
 3 {
 4     var pic=document.getElementById('pic');
 5     var ul=pic.getElementsByTagName('ul')[0];
 6     var li=pic.getElementsByTagName('li');
 7     var left=document.getElementById('left');
 8     var right=document.getElementById('right');
 9     var speed=2;
10     
11     ul.innerHTML=ul.innerHTML+ul.innerHTML;
12     ul.style.width=li[0].offsetWidth*li.length+'px';
13             
14     var move=function(){
15         if(ul.offsetLeft<-ul.offsetWidth/2){
16             ul.style.left='0';
17         }
18         if(ul.offsetLeft>0){
19             ul.style.left=-ul.offsetWidth/2+'px';
20         }
21         ul.style.left=ul.offsetLeft+speed+'px';
22     }
23     
24     var timer=setInterval(move,30);
25     
26     pic.onmouseover=function()
27     {
28         clearInterval(timer);
29     };    
30     
31     pic.onmouseout=function()
32     {
33         setInterval(move,30);
34     };
35     
36     left.onclick=function()
37     {
38         speed=-2;
39     };
40     
41     right.onclick=function()
42     {
43         speed=2;
44     };    
45 };
46 </script>

 

完整代码：

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5 <title>JS无缝滚动</title>
 6 <style>
 7 *{margin:0;padding:0;}
 8 #pic{position:relative;width:600px;height:150px;overflow:hidden;background:#000;margin:300px auto;}
 9 #pic ul{position:absolute;top:0;left:0;}
10 #pic ul li{float:left;list-style:none;height:150px;width:150px;}
11 </style>
12 <script>
13 window.onload=function()
14 {
15     var pic=document.getElementById('pic');
16     var ul=pic.getElementsByTagName('ul')[0];
17     var li=pic.getElementsByTagName('li');
18     var left=document.getElementById('left');
19     var right=document.getElementById('right');
20     var speed=2;
21     
22     ul.innerHTML=ul.innerHTML+ul.innerHTML;
23     ul.style.width=li[0].offsetWidth*li.length+'px';
24             
25     var move=function(){
26         if(ul.offsetLeft<-ul.offsetWidth/2){
27             ul.style.left='0';
28         }
29         if(ul.offsetLeft>0){
30             ul.style.left=-ul.offsetWidth/2+'px';
31         }
32         ul.style.left=ul.offsetLeft+speed+'px';
33     }
34     
35     var timer=setInterval(move,30);
36     
37     pic.onmouseover=function()
38     {
39         clearInterval(timer);
40     };    
41     
42     pic.onmouseout=function()
43     {
44         setInterval(move,30);
45     };
46     
47     left.onclick=function()
48     {
49         speed=-2;
50     };
51     
52     right.onclick=function()
53     {
54         speed=2;
55     };    
56 };
57 </script>
58 </style>
59 </head>
60 
61 <body>
62     <a id="left" href="javascript:">左</a>
63     <a id="right" href="javascript:">右</a>
64 <div id="pic">
65     <ul>
66         <li><img src="images/1.jpg" /></li>
67         <li><img src="images/2.jpg" /></li>
68         <li><img src="images/3.jpg" /></li>
69         <li><img src="images/4.jpg" /></li>
70     </ul>
71 </div>
72 </body>
73 </html>

 

offsetLeft：左边距，这个边距是所有作用于元素后的边距，会算上margin padding等

posted @ 2013-03-04 17:35  yexingwen  阅读(622)  评论(0)  编辑  收藏  举报