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" lang="utf-8">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5 <title>无缝滚动图片示例</title>
6 <style type="text/css">
7 ul
8 {
9 list-style: none;
10 padding: 0px;
11 margin: 0px;
12 }
13 #demo1 ul, #demo2 ul
14 {
15 width: 400px;
16 }
17 #demo1 li, #demo2 li
18 {
19 float: left;
20 }
21 </style>
22
23 <script type="text/javascript">
24 function $(id){
25 return document.getElementById(id);
26 }
27 function Marquee(id,toFollow,speed)
28 {
29 var doScroll;
30 var scrollBox_x="<table cellpadding='0' cellspacing='0'><tr><td id='"+id+"abox'>"+$(id).innerHTML+"</td><td id='"+id+"bbox'>"+$(id).innerHTML+"</td></tr></table>";
31 var scrollBox_y="<table cellpadding='0' cellspacing='0'><tr><td id='"+id+"abox'>"+$(id).innerHTML+"</td></tr><tr><td id='"+id+"bbox'>"+$(id).innerHTML+"</td></tr></table>";
32 var begin=function(){
33 switch(toFollow){
34 case "left":
35 $(id).innerHTML=scrollBox_x;
36 doScroll=setInterval(function(){
37 if($(id).scrollLeft==$(id+"abox").offsetWidth) $(id).scrollLeft=0;
38 $(id).scrollLeft++;
39 },speed);
40 break;
41 case "right":
42 $(id).innerHTML=scrollBox_x;
43 doScroll=setInterval(function(){
44 if($(id).scrollLeft<=0) $(id).scrollLeft=$(id+"bbox").offsetWidth;
45 $(id).scrollLeft--;
46 },speed);
47 break;
48 case "top":
49 $(id).innerHTML=scrollBox_y;
50 doScroll=setInterval(function(){
51 if($(id).scrollTop==$(id+"abox").offsetHeight) $(id).scrollTop=0;
52 $(id).scrollTop++;
53 },speed);
54 break;
55 case "bottom":
56 $(id).innerHTML=scrollBox_y;
57 doScroll=setInterval(function(){
58 if($(id).scrollTop<=0) $(id).scrollTop=$(id+"bbox").offsetHeight;
59 $(id).scrollTop--;
60 },speed);
61 break;
62 }
63 }
64 begin();
65 $(id).onmouseover=function() {clearInterval(doScroll);}
66 $(id).onmouseout=function() {begin();}
67 }
68 window.onload=function(){
69 Marquee("demo2","left",30);
70 Marquee("demo1","right",20);
71 Marquee("demo3","top",30);
72 Marquee("demo4","bottom",30);
73 }
74
75 </script>
76
77 </head>
78 <body>
79 <div id="demo1" style="overflow: hidden; height: 100px; 300px;">
80 <ul>
81 <li>
82 <img src="mm.jpg" mce_src="mm.jpg" style="height: 100px; 200px;" /></li>
83 <li>
84 <img src="me.jpg" mce_src="me.jpg" style="height: 100px; 200px;" /></li>
85 </ul>
86 </div>
87 <br />
88 <div id="demo2" style="overflow: hidden; height: 100px; 300px;">
89 <ul>
90 <li>
91 <img src="mm.jpg" mce_src="mm.jpg" style="height: 100px; 200px;" /></li>
92 <li>
93 <img src="me.jpg" mce_src="me.jpg" style="height: 100px; 200px;" /></li>
94 </ul>
95 </div>
96 <br />
97 <div id="demo3" style="overflow: hidden; height: 150px; 200px;">
98 <ul>
99 <li>
100 <img src="mm.jpg" mce_src="mm.jpg" style="height: 100px; 200px;" /></li>
101 <li>
102 <img src="me.jpg" mce_src="me.jpg" style="height: 100px; 200px;" /></li>
103 </ul>
104 </div>
105 <br />
106 <div id="demo4" style="overflow: hidden; height: 150px; 200px;">
107 <ul>
108 <li>
109 <img src="mm.jpg" mce_src="mm.jpg" style="height: 100px; 200px;" /></li>
110 <li>
111 <img src="me.jpg" mce_src="me.jpg" style="height: 100px; 200px;" /></li>
112 </ul>
113 </div>
114 </body>
115 </html>
116
代码
