首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > Web前端 >

图片滚动成效

2012-11-12 
图片滚动效果htmlheadtitle/titleSCRIPT languageJavaScript typetext/JavaScriptvar sh

图片滚动效果
<html>
<head>
<title></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>
<TABLE cellSpacing=1 width=660 align=center border=0>
<TR bgColor=#f8f8f8>
<TD align="middle" width=25>
<IMG
src="http://www.webjx.com/upfiles/20050905/20050905085723_left.gif"
border=0 () () style="CURSOR: pointer">
</TD>
<TD>

第1期

</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.webjx.com/img/200406302.jpg' border=0>
</td>
</tr>
<tr>
<td>

第2期

</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.webjx.com/img/200406303.jpg' border=0>
</td>
</tr>
<tr>
<td>

第1期

</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.webjx.com/img/200406304.jpg' border=0>
</td>
</tr>
<tr>
<td>

第1期

</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.webjx.com/img/200406305.jpg' border=0>
</td>
</tr>
<tr>
<td>

第2期

</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.webjx.com/img/200406304.jpg' border=0>
</td>
</tr>
<tr>
<td>

第3期

</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.webjx.com/img/200406305.jpg' border=0>
</td>
</tr>
<tr>
<td>

第4期

</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.webjx.com/img/200406302.jpg' border=0>
</td>
</tr>
<tr>
<td>

第5期

</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.webjx.com/img/200406301.jpg' border=0>
</td>
</tr>
<tr>
<td>

第6期

</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.webjx.com/img/200406303.jpg' border=0>
</td>
</tr>
<tr>
<td>

第7期

</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="" border=0 style="CURSOR: pointer">
</TD>
</TR>
</TABLE>
</body>
</html>

热点排行