论坛门户图片滚动代码

286916926 · 发表于 2014-10-5 22:13:23

本帖最后由 286916926 于 2014-10-6 08:42 编辑

这是一个门户网站首页用的图片滚动代码，可以向左或向右移动，效果非常好的。

代码如下，亲们可以根据自己的需要修改图片数量、大小，和移动速度。

<div class="module cl"> http://ganzhoufu.cn 赣州府
<table border="0" width="935" cellspacing="5" cellpadding="0">
<tr>
<td width="11"><img id="r_l" onclick="r_left()"src="static/image/common/pic_nv_prev1.gif">
</td>
<td>
<TABLE cellSpacing=0 cellPadding=0 width=895 border=0>
<TBODY>
<TR>
<TD vAlign=top background="">
<TABLE cellSpacing=0 cellPadding=0 width=895 border=0>
<TBODY>
<TR>
<TD vAlign=center align=middle>
<DIV id=demo style="OVERFLOW: hidden; WIDTH: 895px; COLOR: #ffffff; ">
<TABLE cellPadding=0 width="100%" align=left border=0
cellspace="0">
<TBODY>
<TR>
<TD id=demo1 vAlign=top>
<TABLE cellSpacing=1 cellPadding=1>
<TBODY>
<TR vAlign=top>
<TD vAlign=top noWrap>
<DIV align=right>
<TABLE cellSpacing=0 cellPadding=0 align=center border=0>
<TBODY>
<TR>
<TD align=middle>
<TABLE cellSpacing=0 cellPadding=0 width=120
align=center border=0>
<TBODY>
<TR>
<TD align=middle ><a target="_blank"><img src="http://img01.taobaocdn.com/bao/uploaded/i1/T1XGBeFLxdXXXXXXXX_!!0-item_pic.jpg_310x310.jpg" height="180"
border="0" hspace="1"></a><a target="_blank"><img src="http://img01.taobaocdn.com/bao/uploaded/i3/TB11M_9FVXXXXaAXFXXXXXXXXXX_!!0-item_pic.jpg_310x310.jpg" height="180"
border="0" hspace="1"></a><a target="_blank"><img src="http://img01.taobaocdn.com/bao/uploaded/i2/14467029223306938/T1zWYzFhtaXXXXXXXX_!!0-item_pic.jpg_310x310.jpg" height="180"
border="0" hspace="1"></a><a target="_blank"><img src="http://img01.taobaocdn.com/bao/uploaded/i4/T148PlFtBaXXXXXXXX_!!0-item_pic.jpg_310x310.jpg" height="180"
border="0" hspace="1"></a><a target="_blank"><img src="http://img01.taobaocdn.com/bao/uploaded/i3/T19l_5FExdXXXXXXXX_!!0-item_pic.jpg_310x310.jpg"
height="180"border="0" hspace="1"></a><a target="_blank"><img src="http://img01.taobaocdn.com/bao/uploaded/i4/TB1jLm4GXXXXXamXFXXXXXXXXXX_!!0-item_pic.jpg_310x310.jpg" height="180"
border="0" hspace="1"></a><a target="_blank"><img src="http://img01.taobaocdn.com/bao/uploaded/i4/T1KL10FJ8aXXXXXXXX_!!0-item_pic.jpg_310x310.jpg" height="180"
border="0" hspace="1"></a><a target="_blank"><img src="http://img01.taobaocdn.com/bao/uploaded/i3/TB1slptGXXXXXcsXVXXXXXXXXXX_!!0-item_pic.jpg_310x310.jpg" height="180"
border="0" hspace="1"></a></TD>
</TR>
</TBODY></TABLE></TD>
</TR></TBODY></TABLE></DIV></TD></TR></TBODY></TABLE></TD>
<TD id=demo2 width="0"></TD>
</TR></TBODY></TABLE></DIV>
<SCRIPT>var dir=1//每步移动像素，数大为快
var speed=1//循环周期（毫秒）数大为慢
demo2.innerHTML=demo1.innerHTML
function Marquee(){//正常移动
//alert(demo2.offsetWidth+"\n"+demo.scrollLeft)
if (dir>0 && (demo2.offsetWidth-demo.scrollLeft)<=0) demo.scrollLeft=0
if (dir<0 &&(demo.scrollLeft<=0)) demo.scrollLeft=demo2.offsetWidth
demo.scrollLeft+=dir
demo.onmouseover=function() {clearInterval(MyMar)}//暂停移动
demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}//继续移动
}
function r_left(){if (dir=-1)dir=1}//换向左移
function r_right(){if (dir=1)dir=-1}//换向右移
var MyMar=setInterval(Marquee,speed)
</SCRIPT></TD>
</TR></TBODY></TABLE></TD></TR></TBODY></TABLE>
</td>
<td width="11"><img id="r_r" onclick="r_right()" src="static/image/common/pic_nv_next1.gif">
</td>
</tr>
</table><span style="line-height: 1.5;">http://ganzhoufu.cn<span style="line-height: 1.5;"> </span><span style="line-height: 1.5;">赣州府</span><span style="line-height: 1.5;"></span><span style="line-height: 1.5;"></div></span></span>

复制代码

		自动登录	找回密码
密码			立即注册

[发布] 论坛门户图片滚动代码

本帖子中包含更多资源