箭头控制横向滚动图片_网页图片特效_网页特效库

·网页特效库 ·网页工具库

< 后退 | 收藏网页特效库

推荐网页特效

更多推荐特效

购物网站的导航效果，推荐！

向上下左右滚动图片的特效

超级变态广告代码

加入收藏夹

防止选择和复制

新浪博客的提示窗口，推荐！

网页工具库 - 让网页制作更轻松

推荐网页工具

更多网页工具

在线html编辑器

在线CSS编辑器

滚动条颜色生成器

弹出窗口生成器

网页加密解密工具

汉字转换成拼音工具

文本繁简体转换工具

您的位置：网页特效库 >> 网页图片特效 >> 箭头控制横向滚动图片	查看此特效演示

箭头控制横向滚动图片

把如下代码复制到<head>与</head>之间

<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>

把如下代码复制到<body>与</body>之间

<TABLE cellSpacing=1 width=660 align=center border=0>
<TR bgColor=#f8f8f8>
<TD align=middle width=25><IMG 
      src="images/
/pointer-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='images/1.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='images/2.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='images/3.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='images/4.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='images/5.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='images/6.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='images/7.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='images/8.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='images/9.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='images/10.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="images/pointer-right.gif" border=0 onmouseout=StopScroll() onmouseover=Right() style="CURSOR: pointer"></TD>
</TR></TABLE>

修改<body>标签为

使用说明：这个特效比较实用，<body></body>代码部分的src值为调用的图片，可以自行更改，也可以为图片加上链接，如果要增加图片只需按照代码的样式添加相应的代码即可。

上一个特效：放大镜特效

下一个特效：拼图代码！图片打碎后组合

网页工具库 - 让网页制作更轻松

网页特效库

关于我们 | 联系本站 | 免责声明 | 版权声明 | 网站地图 | 友情链接 | 鄂ICP备05023174号
Copyright © 2008 www.butong.net.All Rights Reserved.