1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8" />
5 <title>Document</title>
6 </head>
7 <body>
8
9 <div id="colee" style="overflow:hidden;height:253px;width:410px;">
10 <div id="colee1">
11 <p><img src="http://js.alixixi.com/img/201108/1.jpg"></p>
12 <p><img src="http://js.alixixi.com/img/201108/1.jpg"></p>
13 <p><img src="http://js.alixixi.com/img/201108/1.jpg"></p>
14 <p><img src="http://js.alixixi.com/img/201108/1.jpg"></p>
15 <p><img src="http://js.alixixi.com/img/201108/1.jpg"></p>
16 <p><img src="http://js.alixixi.com/img/201108/1.jpg"></p>
17 <p><img src="http://js.alixixi.com/img/201108/1.jpg"></p>
18 <p><img src="http://js.alixixi.com/img/201108/1.jpg"></p>
19 </div>
20 <div id="colee2"></div>
21 </div>
22 <script>
23 var speed=30;
24 var colee2=document.getElementById("colee2");
25 var colee1=document.getElementById("colee1");
26 var colee=document.getElementById("colee");
27 colee2.innerHTML=colee1.innerHTML; //克隆colee1为colee2
28 function Marquee1(){
29 //当滚动至colee1与colee2交界时
30 if(colee2.offsetTop-colee.scrollTop<=0){ //在这个点之后，如果不做处理的话，colee2.offsetTop会越来越小，colee.scrollTop会越来越大
31 colee.scrollTop-=colee1.offsetHeight; //colee跳到最顶端
32 }else{
33 colee.scrollTop++ //数字，可以自增
34 }
35 }
36 var MyMar1=setInterval(Marquee1,speed)//设置定时器
37 //鼠标移上时清除定时器达到滚动停止的目的
38 colee.onmouseover=function() {clearInterval(MyMar1)}
39 //鼠标移开时重设定时器
40 colee.onmouseout=function(){MyMar1=setInterval(Marquee1,speed)}
41 </script>
42 <!--向上滚动代码结束-->
43
44
45
46
47 <br>
48 <!--下面是向下滚动代码-->
49 <div id="colee_bottom" style="overflow:hidden;height:253px;width:410px;">
50 <div id="colee_bottom1">
51 <p><img src="http://js.alixixi.com/img/201108/1.jpg"></p>
52 <p><img src="http://js.alixixi.com/img/201108/1.jpg"></p>
53 <p><img src="http://js.alixixi.com/img/201108/1.jpg"></p>
54 <p><img src="http://js.alixixi.com/img/201108/1.jpg"></p>
55 <p><img src="http://js.alixixi.com/img/201108/1.jpg"></p>
56 <p><img src="http://js.alixixi.com/img/201108/1.jpg"></p>
57 <p><img src="http://js.alixixi.com/img/201108/1.jpg"></p>
58 <p><img src="http://js.alixixi.com/img/201108/1.jpg"></p>
59 <p><img src="http://js.alixixi.com/img/201108/1.jpg"></p>
60 </div>
61 <div id="colee_bottom2"></div>
62 </div>
63 <script>
64 var speed=30
65 var colee_bottom2=document.getElementById("colee_bottom2");
66 var colee_bottom1=document.getElementById("colee_bottom1");
67 var colee_bottom=document.getElementById("colee_bottom");
68 colee_bottom2.innerHTML=colee_bottom1.innerHTML
69 colee_bottom.scrollTop=colee_bottom.scrollHeight
70 function Marquee2(){
71 if(colee_bottom1.offsetTop-colee_bottom.scrollTop>=0)
72 colee_bottom.scrollTop+=colee_bottom2.offsetHeight
73 else{
74 colee_bottom.scrollTop--
75 }
76 }
77 var MyMar2=setInterval(Marquee2,speed)
78 colee_bottom.onmouseover=function() {clearInterval(MyMar2)}
79 colee_bottom.onmouseout=function() {MyMar2=setInterval(Marquee2,speed)}
80 </script>
81 <!--向下滚动代码结束-->
82 <br>
83 <!--下面是向左滚动代码-->
84 <div id="colee_left" style="overflow:hidden;width:500px;">
85 <table cellpadding="0" cellspacing="0" border="0">
86 <tr><td id="colee_left1" valign="top" align="center">
87 <table cellpadding="2" cellspacing="0" border="0">
88 <tr align="center">
89 <td><p><img src="http://js.alixixi.com/img/201108/1.jpg"></p></td>
90 <td><p><img src="http://js.alixixi.com/img/201108/1.jpg"></p></td>
91 <td><p><img src="http://js.alixixi.com/img/201108/1.jpg"></p></td>
92 <td><p><img src="http://js.alixixi.com/img/201108/1.jpg"></p></td>
93 <td><p><img src="http://js.alixixi.com/img/201108/1.jpg"></p></td>
94 <td><p><img src="http://js.alixixi.com/img/201108/1.jpg"></p></td>
95 <td><p><img src="http://js.alixixi.com/img/201108/1.jpg"></p></td>
96 </tr>
97 </table>
98 </td>
99 <td id="colee_left2" valign="top"></td>
100 </tr>
101 </table>
102 </div>
103 <script>
104 //使用div时，请保证colee_left2与colee_left1是在同一行上.
105 var speed=30//速度数值越大速度越慢
106 var colee_left2=document.getElementById("colee_left2");
107 var colee_left1=document.getElementById("colee_left1");
108 var colee_left=document.getElementById("colee_left");
109 colee_left2.innerHTML=colee_left1.innerHTML
110 function Marquee3(){
111 if(colee_left2.offsetWidth-colee_left.scrollLeft<=0)//offsetWidth 是对象的可见宽度
112 colee_left.scrollLeft-=colee_left1.offsetWidth//scrollWidth 是对象的实际内容的宽，不包边线宽度
113 else{
114 colee_left.scrollLeft++
115 }
116 }
117 var MyMar3=setInterval(Marquee3,speed)
118 colee_left.onmouseover=function() {clearInterval(MyMar3)}
119 colee_left.onmouseout=function() {MyMar3=setInterval(Marquee3,speed)}
120 </script>
121 <!--向左滚动代码结束-->
122 <br>
123 <!--下面是向右滚动代码-->
124 <div id="colee_right" style="overflow:hidden;width:500px;">
125 <table cellpadding="0" cellspacing="0" border="0">
126 <tr><td id="colee_right1" valign="top" align="center">
127 <table cellpadding="2" cellspacing="0" border="0">
128 <tr align="center">
129 <td><p><img src="http://js.alixixi.com/img/201108/1.jpg"></p></td>
130 <td><p><img src="http://js.alixixi.com/img/201108/1.jpg"></p></td>
131 <td><p><img src="http://js.alixixi.com/img/201108/1.jpg"></p></td>
132 <td><p><img src="http://js.alixixi.com/img/201108/1.jpg"></p></td>
133 <td><p><img src="http://js.alixixi.com/img/201108/1.jpg"></p></td>
134 </tr>
135 </table>
136 </td>
137 <td id="colee_right2" valign="top"></td>
138 </tr>
139 </table>
140 </div>
141 <script>
142 var speed=30//速度数值越大速度越慢
143 var colee_right2=document.getElementById("colee_right2");
144 var colee_right1=document.getElementById("colee_right1");
145 var colee_right=document.getElementById("colee_right");
146 colee_right2.innerHTML=colee_right1.innerHTML
147 function Marquee4(){
148 if(colee_right.scrollLeft<=0)
149 colee_right.scrollLeft+=colee_right2.offsetWidth
150 else{
151 colee_right.scrollLeft--
152 }
153 }
154 var MyMar4=setInterval(Marquee4,speed)
155 colee_right.onmouseover=function() {clearInterval(MyMar4)}
156 colee_right.onmouseout=function() {MyMar4=setInterval(Marquee4,speed)}
157 </script>
158 <!--向右滚动代码结束-->
159 </body>
160 </html>
