控制图片水平方向左右滚动的JS代码
代码简介:
一款JS图片滚动效果,默认是不滚动,鼠标放到左侧的三角符号上,它才会滚动,效果不错,运行时请耐心一点等待图片加载完成,然后刷新一下页面就正常了。
代码内容:
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>控制图片水平方向左右滚动的JS代码 - www.webdm.cn</title> <SCRIPT language=JavaScript type=text/JavaScript> <!-- var sh; marqueesWidth=610; preLeft=0; currentLeft=0; stopscroll=false; getlimit=0;preTop=0; currentTop=0; function scrollLeft() { if(stopscroll==true) return; preLeft=marquees.scrollLeft; marquees.scrollLeft+=2; if(preLeft==marquees.scrollLeft) { //marquees.scrollLeft=templayer.offsetWidth-marqueesWidth+1; } } function scrollRight() { if(stopscroll==true) return; preLeft=marquees.scrollLeft; marquees.scrollLeft-=2; if(preLeft==marquees.scrollLeft) { if(!getlimit) { marquees.scrollLeft=templayer.offsetWidth*2; getlimit=marquees.scrollLeft; } marquees.scrollLeft-=1; } } function Left() { stopscroll = false; sh = setInterval("scrollLeft()",20); } function Right() { stopscroll = false; sh = setInterval("scrollRight()",20); } function StopScroll() { stopscroll = true; clearInterval( sh ); } function SelectType(value) { document.all.sendForm.page.value = 1; document.all.sendForm.type.value = value; document.all.sendForm.submit(); } function init() { with(marquees) { style.height=0; style.width=marqueesWidth; style.overflowX="hidden"; style.overflowY="visible"; style.align = "center"; noWrap=true; } } //--> </SCRIPT> </head> <!--body区域内代码--> <body onload="init()"> <TABLE cellSpacing=1 width=660 align=center border=0> <TR bgColor=#f8f8f8> <TD align=middle width=25><img src="http://www.webdm.cn/images/20091005/left.gif" border=0 onmouseout=StopScroll() onmouseover=Left() style="CURSOR: pointer" /></TD> <TD> <DIV id=marquees> <TABLE border=0><TR> <TD align=middle width=85><table cellSpacing=0 cellPadding=0 align=center border=0><tr><td><img class=imgframe src='http://www.webdm.cn/images/wall7_s.jpg' border=0 /></td> </tr><tr><td><div align="center">第1期</div></td> </tr></table></TD><TD align=middle width=85><table cellSpacing=0 cellPadding=0 align=center border=0><tr><td><img class=imgframe src='http://www.webdm.cn/images/wall1_s.jpg' border=0 /></td> </tr><tr><td><div align="center">第2期</div></td> </tr></table></TD><TD align=middle width=85><table cellSpacing=0 cellPadding=0 align=center border=0><tr><td><img class=imgframe src='http://www.webdm.cn/images/wall2_s.jpg' border=0 /></td> </tr><tr><td><div align="center">第1期 </div></td> </tr></table></TD><TD align=middle width=85><table cellSpacing=0 cellPadding=0 align=center border=0><tr><td><img class=imgframe src='http://www.webdm.cn/images/wall3_s.jpg' border=0 /></td> </tr><tr><td><div align="center">第1期</div></td> </tr></table></TD><TD align=middle width=85><table cellSpacing=0 cellPadding=0 align=center border=0><tr><td><img class=imgframe src='http://www.webdm.cn/images/wall4_s.jpg' border=0 /></td> </tr><tr><td><div align="center">第2期</div></td> </tr></table></TD><TD align=middle width=85><table cellSpacing=0 cellPadding=0 align=center border=0><tr><td><img class=imgframe src='http://www.webdm.cn/images/wall5_s.jpg' border=0 /></td> </tr><tr><td><div align="center">第3期</div></td> </tr></table></TD><TD align=middle width=85><table cellSpacing=0 cellPadding=0 align=center border=0><tr><td><img class=imgframe src='http://www.webdm.cn/images/wall6_s.jpg' border=0 /></td> </tr><tr><td><div align="center">第4期</div></td> </tr></table></TD><TD align=middle width=85><table cellSpacing=0 cellPadding=0 align=center border=0><tr><td><img class=imgframe src='http://www.webdm.cn/images/wall7_s.jpg' border=0 /></td> </tr><tr><td><div align="center">第5期</div></td> </tr></table></TD><TD align=middle width=85><table cellSpacing=0 cellPadding=0 align=center border=0><tr><td><img class=imgframe src='http://www.webdm.cn/images/wall8_s.jpg' border=0 /></td> </tr><tr><td><div align="center">第6期</div></td> </tr></table></TD><TD align=middle width=85><table cellSpacing=0 cellPadding=0 align=center border=0><tr><td><img class=imgframe src='http://www.webdm.cn/images/wall9_s.jpg' border=0 /></td> </tr><tr><td><div align="center">第7期</div></td> </tr></table></TD> </TR></TABLE></DIV> <DIV id=templayer style="LEFT: 0px; VISIBILITY: hidden; POSITION: absolute; TOP: 0px"></DIV></TD> <TD align=middle width=25><img src="http://www.webdm.cn/images/20091005/right.gif" border=0 onmouseout=StopScroll() onmouseover=Right() /></TD> </TR></TABLE> <div align="center"><br><br>如果没有看到效果,请等待图片下载完成,并刷新页面。鼠标先放到左边,然后在放右边。</div> </body> </html> <br /> <p><a href="http://www.webdm.cn">网页代码站</a> - 最专业的网页代码下载网站 - 致力为中国站长提供有质量的网页代码!</p>
代码来自:http://www.webdm.cn/webcode/6a432bee-331a-474f-b541-d8f74c8d2dab.html