<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要足够长