JS平滑图片滚动_图片特效特效

一款JS图片滚动效果，默认是不滚动，鼠标放到左侧的三角符号上，它才会滚动，效果不错，运行时请耐心一点等待图片加载完成，然后刷新一下页面就正常了。

<html>
<head>
<meta http-equiv="Content-Type" mrc="text/html; charset=gb2312">
<title>JS平滑图片滚动</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 Left()
{
	stopscroll = false;
	sh = setInterval("scrollLeft()",20);
}
function Right()
{
	stopscroll = false;
	sh = setInterval("scrollRight()",20);
}

function StopScroll()
{
	stopscroll = true;
	clearInterval( sh );
}

//-->
</SCRIPT>
</head>

<body onload="init()">
<TABLE cellSpacing=1 width=660 align=center border=0>
<TR bgColor=#f8f8f8>
<TD align=middle width=25><img 
      src="http://p1.mb5u.com/texiao/1/20110225160458238.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://p1.mb5u.com/texiao/1/20110225160458239.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://p1.mb5u.com/texiao/1/20110225160458240.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://p1.mb5u.com/texiao/1/20110225160458241.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://p1.mb5u.com/texiao/1/20110225160458242.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://p1.mb5u.com/texiao/1/20110225160458243.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://p1.mb5u.com/texiao/1/20110225160458244.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://p1.mb5u.com/texiao/1/20110225160458245.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://p1.mb5u.com/texiao/1/20110225160458246.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://p1.mb5u.com/texiao/1/20110225160458247.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://p1.mb5u.com/texiao/1/20110225160458239.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://p1.mb5u.com/texiao/1/20110225160458248.gif" border=0 onmouseout=StopScroll() onmouseover=Right() /></TD>
</TR></TABLE>
<div align="center"><br><br>如果没有看到效果，请等待图片下载完成，并刷新页面。鼠标先放到左边，然后在放右边。</div>
</body>
</html>

所属频道：图片特效特效/更新时间：2012-12-09

[收藏][报错][返回列表]

JS平滑图片滚动_图片特效特效

图片特效特效Rss订阅特效代码搜索

图片特效特效推荐

猜你也喜欢看这些