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编辑  收藏  举报