【转】javascript实现图片的连续滚动
原文请参考:http://www.cnblogs.com/xucanzhao/archive/2005/12/02/289194.html
1 <table cellspacing="0" style='border: 1px solid #9F9F9F;' width="100%">
2 <tr align="center">
3 <td bgcolor="#CCCCCC">
4 <div id="demo" style="overflow: hidden; height: 120px; width: 700px; margin-top: 12px; vertical-align: middle;">
5 <table width="cellspacing=0">
6 <tr>
7 <td id="demo1">
8 <table cellspacing="0">
9 <tr>
10 <!--滚动图片 begin-->
11 <td class=RollPic><a href=/z/chinaoverseas/photo/22566/index.shtml target="_blank"><img src=http://image2.sina.com.cn/ty/g/p/2005-12-02/U1489P6T12D1912318F44DT20051202002622_small_h.JPG border=1 alt='邵佳一慕尼黑1860随队训练'></a></td>
35 <td width=4><img width=4></td>
36<td class=RollPic><a href=/z/chinaoverseas/photo/22493/index.shtml target="_blank"><img src=http://image2.sina.com.cn/ty/j/2005-11-30/U1489P6T12D1908322F44DT20051130010010_small_h.jpg border=1 alt='孙祥结束试训回国'></a></td>
37 <td width=4><img width=4></td>
38<td class=RollPic><a href=/z/chinaoverseas/photo/22432/index.shtml target="_blank"><img src=http://image2.sina.com.cn/ty/g/p/2005-11-29/U329P6T12D1907332F44DT20051129101956_small_h.jpg border=1 alt='邵佳一连续三场进球'></a></td>
39 <td width=4><img width=4></td>
40<td class=RollPic><a href=/z/chinaoverseas/photo/22414/index.shtml target="_blank"><img src=http://image2.sina.com.cn/ty/g/p/2005-11-28/U1022P6T12D1904876F44DT20051128072121_small_h.jpg border=1 alt='1860客场险胜邵佳一再进球'></a></td>
41 <td width=4><img width=4></td>
42<td class=RollPic><a href=/z/chinaoverseas/photo/22401/index.shtml target="_blank"><img src=http://image2.sina.com.cn/ty/g/p/2005-11-27/U1166P6T12D1903924F44DT20051127180803_small_h.jpg border=1 alt='曲圣卿助本队赢得榜首大战'></a></td>
43 <td width=4><img width=4></td>
44<td class=RollPic><a href=/z/chinaoverseas/photo/22299/index.shtml target="_blank"><img src=http://image2.sina.com.cn/ty/g/p/2005-11-25/U1022P6T12D1900128F44DT20051125110547_small_h.jpg border=1 alt='孙祥试训维冈表现不俗'></a></td>
45 <td width=4><img width=4></td>
12 <!--滚动图片 end-->
13 </tr>
14 </table>
15 </td>
16 <td id="demo2">
17 </td>
18 </tr>
19 </table>
20 </div>
21 </td>
22 </tr>
23 </table>
24
2 <tr align="center">
3 <td bgcolor="#CCCCCC">
4 <div id="demo" style="overflow: hidden; height: 120px; width: 700px; margin-top: 12px; vertical-align: middle;">
5 <table width="cellspacing=0">
6 <tr>
7 <td id="demo1">
8 <table cellspacing="0">
9 <tr>
10 <!--滚动图片 begin-->
11 <td class=RollPic><a href=/z/chinaoverseas/photo/22566/index.shtml target="_blank"><img src=http://image2.sina.com.cn/ty/g/p/2005-12-02/U1489P6T12D1912318F44DT20051202002622_small_h.JPG border=1 alt='邵佳一慕尼黑1860随队训练'></a></td>
35 <td width=4><img width=4></td>
36<td class=RollPic><a href=/z/chinaoverseas/photo/22493/index.shtml target="_blank"><img src=http://image2.sina.com.cn/ty/j/2005-11-30/U1489P6T12D1908322F44DT20051130010010_small_h.jpg border=1 alt='孙祥结束试训回国'></a></td>
37 <td width=4><img width=4></td>
38<td class=RollPic><a href=/z/chinaoverseas/photo/22432/index.shtml target="_blank"><img src=http://image2.sina.com.cn/ty/g/p/2005-11-29/U329P6T12D1907332F44DT20051129101956_small_h.jpg border=1 alt='邵佳一连续三场进球'></a></td>
39 <td width=4><img width=4></td>
40<td class=RollPic><a href=/z/chinaoverseas/photo/22414/index.shtml target="_blank"><img src=http://image2.sina.com.cn/ty/g/p/2005-11-28/U1022P6T12D1904876F44DT20051128072121_small_h.jpg border=1 alt='1860客场险胜邵佳一再进球'></a></td>
41 <td width=4><img width=4></td>
42<td class=RollPic><a href=/z/chinaoverseas/photo/22401/index.shtml target="_blank"><img src=http://image2.sina.com.cn/ty/g/p/2005-11-27/U1166P6T12D1903924F44DT20051127180803_small_h.jpg border=1 alt='曲圣卿助本队赢得榜首大战'></a></td>
43 <td width=4><img width=4></td>
44<td class=RollPic><a href=/z/chinaoverseas/photo/22299/index.shtml target="_blank"><img src=http://image2.sina.com.cn/ty/g/p/2005-11-25/U1022P6T12D1900128F44DT20051125110547_small_h.jpg border=1 alt='孙祥试训维冈表现不俗'></a></td>
45 <td width=4><img width=4></td>
12 <!--滚动图片 end-->
13 </tr>
14 </table>
15 </td>
16 <td id="demo2">
17 </td>
18 </tr>
19 </table>
20 </div>
21 </td>
22 </tr>
23 </table>
24
<script>
71 var speed=10//速度数值越大速度越慢
72 demo2.innerHTML=demo1.innerHTML
73 function Marquee(){
74 if(demo2.offsetWidth-demo.scrollLeft<=0)
75 demo.scrollLeft-=demo1.offsetWidth
76 else{
77 demo.scrollLeft++
78 }
79 }
80 var MyMar=setInterval(Marquee,speed)
81 demo.onmouseover=function() {clearInterval(MyMar)}
82 demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
83 </script>
71 var speed=10//速度数值越大速度越慢
72 demo2.innerHTML=demo1.innerHTML
73 function Marquee(){
74 if(demo2.offsetWidth-demo.scrollLeft<=0)
75 demo.scrollLeft-=demo1.offsetWidth
76 else{
77 demo.scrollLeft++
78 }
79 }
80 var MyMar=setInterval(Marquee,speed)
81 demo.onmouseover=function() {clearInterval(MyMar)}
82 demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
83 </script>