javascript 控制图片水平方向左右滚动代码

时间：2022-06-25 20:42:44 编辑：袖梨来源：一聚教程网

提示：您可以先修改部分代码再运行

<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;
marquees;
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="https://img.111com.net/get_pic/2011/05/20111217013225135.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='https://img.111com.net/get_pic/2011/05/2011121701323138.jpg' border=0 /></td>
</tr><tr><td><div align="center">第1期</div></td>
</tr></table></TD><TD align=middle ><table cellSpacing=0 cellPadding=0 align=center border=0><tr><td><img  
class=imgframe src='https://img.111com.net/get_pic/2011/05/20111217013238612.jpg' border=0 /></td>
</tr><tr><td><div align="center">第2期</div></td>
</tr></table></TD><TD align=middle ><table cellSpacing=0 cellPadding=0 align=center border=0><tr><td><img  
class=imgframe src='https://img.111com.net/get_pic/2011/05/20111217013244167.jpg' border=0 /></td>
</tr><tr><td><div align="center">第1期 </div></td>
</tr></table></TD><TD align=middle ><table cellSpacing=0 cellPadding=0 align=center border=0><tr><td><img  
class=imgframe src='https://img.111com.net/get_pic/2011/05/20111217013250143.jpg' border=0 /></td>
</tr><tr><td><div align="center">第1期</div></td>
</tr></table></TD><TD align=middle ><table cellSpacing=0 cellPadding=0 align=center border=0><tr><td><img  
class=imgframe src='https://img.111com.net/get_pic/2011/05/20111217013257242.jpg' border=0 /></td>
</tr><tr><td><div align="center">第2期</div></td>
</tr></table></TD><TD align=middle ><table cellSpacing=0 cellPadding=0 align=center border=0><tr><td><img  
class=imgframe src='https://img.111com.net/get_pic/2011/05/20111217013303908.jpg' border=0 /></td>
</tr><tr><td><div align="center">第3期</div></td>
</tr></table></TD><TD align=middle ><table cellSpacing=0 cellPadding=0 align=center border=0><tr><td><img  
class=imgframe src='https://img.111com.net/get_pic/2011/05/20111217013310273.jpg' border=0 /></td>
</tr><tr><td><div align="center">第4期</div></td>
</tr></table></TD><TD align=middle ><table cellSpacing=0 cellPadding=0 align=center border=0><tr><td><img  
class=imgframe src='https://img.111com.net/get_pic/2011/05/2011121701323138.jpg' border=0 /></td>
</tr><tr><td><div align="center">第5期</div></td>
</tr></table></TD><TD align=middle ><table cellSpacing=0 cellPadding=0 align=center border=0><tr><td><img  
class=imgframe src='https://img.111com.net/get_pic/2011/05/20111217013316188.jpg' border=0 /></td>
</tr><tr><td><div align="center">第6期</div></td>
</tr></table></TD><TD align=middle ><table cellSpacing=0 cellPadding=0 align=center border=0><tr><td><img  
class=imgframe src='http://www.111com.net/notfound.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 ><img  
      src="https://img.111com.net/get_pic/2011/05/20111217013333102.gif" border=0 onmouseout=StopScroll() onmouseover=Right()

/></TD>
</TR></TABLE>
<div align="center"><br><br>如果没有看到效果，请等待图片下载完成，并刷新页面。鼠标先放到左边，然后在放右边。</div>
</body>
</html></td>
	  </tr>
	</table>

提示：您可以先修改部分代码再运行

推荐专题

最新下载

热门教程

javascript 控制图片水平方向左右滚动代码

相关文章

热门栏目

php教程

asp.net教程

手机开发

css教程

网页制作

办公数码

jsp教程