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   class="q2wo0mm"   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   class="ygosa2i"   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訂閱特效代碼搜索

圖片特效特效推薦

猜你也喜歡看這些