如何用JS实现在表格内横向滚动图片

JavaScript013

如何用JS实现在表格内横向滚动图片,第1张

<table valign=top width=770 >

<tr>

<td width=770 valign=top >

<div id="demo" style="overflow:hiddenwidth:770">

<table >

<tr>

<td valign="top" id="marquePic1">

<table width=770>

<tr align="top">

<td><table><tr>

<!--数目-->

<td ><a href="#" ><img alt="javascript 图片左右滚动效果代码" src="/act/thsiff10/images/ro01.jpg" border=0 ></a></td>

<td ><a href="#" ><img alt="javascript 图片左右滚动效果代码" src="/act/thsiff10/images/ro01.jpg" border=0 ></a></td>

<td ><a href="#" ><img alt="javascript 图片左右滚动效果代码" src="/act/thsiff10/images/ro01.jpg" border=0 ></a></td>

<td ><a href="#" ><img alt="javascript 图片左右滚动效果代码" src="/act/thsiff10/images/ro01.jpg" border=0 ></a></td>

<td ><a href="#" ><img alt="javascript 图片左右滚动效果代码" src="/act/thsiff10/images/ro01.jpg" border=0 ></a></td>

<td ><a href="#" ><img alt="javascript 图片左右滚动效果代码" src="/act/thsiff10/images/ro01.jpg" border=0 ></a></td>

<td ><a href="#" ><img alt="javascript 图片左右滚动效果代码" src="/act/thsiff10/images/ro01.jpg" border=0 ></a></td>

<!--数目-->

</tr></table></td>

</tr>

</table>

</td>

<td id=marquePic2 valign=top></td>

</tr>

</table>

</div>

</td>

</tr>

</table>

<script type="text/javascript">

var speed=30

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>

内容要够多才会滚,你只放一两张图进去宽度不够就不会动。

<div id=demo style="width:800pxoverflow:hidden">

<table width="100%" border="0" cellspacing="0" cellpadding="0">

<tr>

<td id=demo1>

<table width="100%" border="0" cellspacing="0" cellpadding="5">

<tr>

<td valign="top"><img src="uploadfiles/smallpic/qfj.jpg" width="165" height="114" border="0" /></td>

<td valign="top"><img src="uploadfiles/smallpic/qfj.jpg" width="165" height="114" border="0" /></td>

<td valign="top"><img src="uploadfiles/smallpic/qfj.jpg" width="165" height="114" border="0" /></td>

<td valign="top"><img src="uploadfiles/smallpic/qfj.jpg" width="165" height="114" border="0" /></td>

<td valign="top"><img src="uploadfiles/smallpic/qfj.jpg" width="165" height="114" border="0" /></td>

<td valign="top"><img src="uploadfiles/smallpic/qfj.jpg" width="165" height="114" border="0" /></td>

<td valign="top"><img src="uploadfiles/smallpic/qfj.jpg" width="165" height="114" border="0" /></td>

</tr>

</table>

</td>

<td id=demo2></td>

</tr>

</table>

</div>

<script>

var speed=20

document.getElementById("demo2").innerHTML=document.getElementById("demo1").innerHTML

function Marquee(){

if(document.getElementById("demo2").offsetWidth-document.getElementById("demo").scrollLeft<=0)

document.getElementById("demo").scrollLeft-=document.getElementById("demo1").offsetWidth

else{

document.getElementById("demo").scrollLeft++

}

}

var MyMar=setInterval(Marquee,speed)

document.getElementById("demo").onmouseover=function() {clearInterval(MyMar)}

document.getElementById("demo").onmouseout=function() {MyMar=setInterval(Marquee,speed)}

</script>

id为demo的div 宽度是在版面上要显示出的宽度,这个是必须定义的,还有overflow:hidden这个也是必须的

内容放在demo1的td里面

你放进去滚动的内容宽度必须大于demo的宽度才能滚动,当然这个宽度随你自己定

理论上是可以放无限宽的数据

鼠标悬停就停止滚动,离开继续滚动