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

JavaScript014

如何用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>

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

给个思路吧,设装着所有图片的层为boxa,

它的父层为boxb,

点击移动的时候你把boxa向左移一张图片的宽度就是了,也就是点击的时候更改boxa的margin-left为负数,

boxb要设置over-flow为hidden

,

boxa要足够长