控制图片水平方向左右滚动的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

posted @ 2011-12-16 10:35  网页代码站  阅读(424)  评论(0编辑  收藏  举报