Question

同一种js效果如何在一个html里使用多次

以下为代码：
<div id=demo style="overflow:hidden;width:750;" align=center>
<table align=center cellpadding=1 cellspacing=1 cellspace=0 >
<tr>
<td valign=top id=marquePic1>
<table width='100%' border='0' cellspacing='5'>
<tr>
<td align=center><a href='#'>
<img src="img1.png" width=200 height=103 border=0><br><br>01</a></td>
<td align=center><a href='#'>
<img src="img2.png" width=200 height=103 border=0><br><br>02</a></td>
<td align=center><a href='#'>
<img src="img3.png" width=200 height=103 border=0><br><br>03</a></td>
<td align=center><a href='#'>
<img src="img4.png" width=200 height=103 border=0><br><br>04</a></td>
<td align=center><a href='#'>
<img src="img5.png" width=200 height=103 border=0><br><br>05</a></td>
<td align=center><a href='#'>
<img src="img6.png" width=200 height=103 border=0><br><br>06</a></td>
<td align=center><a href='#'>
<img src="img7.png" width=200 height=103 border=0><br><br>07</a></td>
<td align=center><a href='#'>
<img src="img8.png" width=200 height=103 border=0><br><br>08</a></td>
<td align=center><a href='#'>
<img src="img9.png" width=200 height=103 border=0><br><br>09</a></td>
</tr>
</table>
</td>
<td id=marquePic2 valign=top></td>
</tr>
</table>
</div>
<script type="text/javascript">
var speed=50
marquePic2.innerHTML=marquePic1.innerHTML
function Marquee(){
if(demo.scrollLeft>=marquePic1.scrollWidth){
demo.scrollLeft=0
}else{
demo.scrollLeft++
}
}
var MyMar=setInterval(Marquee,speed)
demo.onmouseover=function() {clearInterval(MyMar)}
demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
</script>
也就是说如果我有另外一组图了要接在这组图下面，如何在使用一次这个js效果

Answer 1

<div id=demo style="overflow:hidden;width:750;" align=center>
<table align=center cellpadding=1 cellspacing=1 cellspace=0 >
<tr>
<td valign=top id=marquePic1>
<table width='100%' border='0' cellspacing='5'>
<tr>
<td align=center><a href='#'>
<img src="img1.png" width=200 height=103 border=0><br><br>01</a></td>
<td align=center><a href='#'>
<img src="img2.png" width=200 height=103 border=0><br><br>02</a></td>
<td align=center><a href='#'>
<img src="img3.png" width=200 height=103 border=0><br><br>03</a></td>

</tr>
</table>
</td>
<td id=marquePic2 valign=top></td>
</tr>
</table>
</div>

<div id=demo2 style="overflow:hidden;width:750;" align=center>
<table align=center cellpadding=1 cellspacing=1 cellspace=0 >
<tr>
<td valign=top id=marquePic11>
<table width='100%' border='0' cellspacing='5'>
<tr>
<td align=center><a href='#'>
<img src="img1.png" width=200 height=103 border=0><br><br>01</a></td>
<td align=center><a href='#'>
<img src="img2.png" width=200 height=103 border=0><br><br>02</a></td>
<td align=center><a href='#'>
<img src="img3.png" width=200 height=103 border=0><br><br>03</a></td>

</tr>
</table>
</td>
<td id=marquePic22 valign=top></td>
</tr>
</table>
</div>

<script type="text/javascript">
var speed=50
marquePic2.innerHTML=marquePic1.innerHTML
function Marquee(){
if(demo.scrollLeft>=marquePic1.scrollWidth){
demo.scrollLeft=0
}else{
demo.scrollLeft++
}
}
var MyMar=setInterval(Marquee,speed)
demo.onmouseover=function() {clearInterval(MyMar)}
demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}

var speed2=50
marquePic22.innerHTML=marquePic11.innerHTML
function Marquee2(){
if(demo2.scrollLeft>=marquePic11.scrollWidth){
demo2.scrollLeft=0
}else{
demo2.scrollLeft++
}
}
var MyMar2=setInterval(Marquee2,speed2)
demo2.onmouseover=function() {clearInterval(MyMar2)}
demo2.onmouseout=function() {MyMar2=setInterval(Marquee2,speed2)}
</script>

以上能够实现两种~~

追问

这个代码开始没问题，可是过几秒图片的滚动就停止了是怎么回事

追答

图片条数能增加的~增加以下类似的代码~

03