代码简介:
一款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 οnlοad="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 οnmοuseοut=StopScroll() οnmοuseοver=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 οnmοuseοut=StopScroll() οnmοuseοver=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