html 图片左右自动滚动js实现效果

比如有8张图片，图片自左向右自动滚动，8张滚动完了，图片自动由右向左，一次重复滚动。两边有两个按钮，鼠标点击右边的按钮，图片滚动速度回加快。要用div+css+js的效果... 比如有8张图片，图片自左向右自动滚动，8张滚动完了，图片自动由右向左，一次重复滚动。两边有两个按钮，鼠标点击右边的按钮，图片滚动速度回加快。要用div+css+js的效果实现。谢啦！展开

 我来答

1个回答

#热议# 网上掀起『练心眼子』风潮，真的能提高情商吗？

濮焮戎fO
2012-02-24 · TA获得超过371个赞

知道小有建树答主

回答量：402

采纳率：100%

帮助的人：493万

我也去答题访问个人页

关注

展开全部

类似这个效果的网上很多的啦，弄个改改就行了。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>JS平滑图片滚动</title>
<SCRIPT language=JavaScript type=text/JavaScript>
var sh;
var marquees;
marqueesWidth=610;
var speed=20,preLeft=0,stopscroll=false,flag=true;
function scrollLeft(){
	preLeft=marquees.scrollLeft;
	marquees.scrollLeft+=3;
	if(preLeft>=marquees.scrollLeft){
		Right();
	}
}
function scrollRight(){
	preLeft=marquees.scrollLeft;
	marquees.scrollLeft-=3;
	if(preLeft<=marquees.scrollLeft){
		Left();
	}
}
function Left(){
	flag=true;
	clearInterval( sh );
	sh = setInterval("scrollLeft()",speed);
}
function Right(){
	flag=false;
	clearInterval( sh );
	sh = setInterval("scrollRight()",speed);
}

function normal(){
	clearInterval( sh );
	speed=20;
	if(flag)Left();
	else Right();
}
function plusSpeed(){
	clearInterval( sh );
	speed=10;
	if(flag)Left();
	else Right();
}
function init(){
	marquees=document.getElementById("marquees1");
	with(marquees){
		style.width=marqueesWidth+"px";
		style.overflowX="hidden";
		style.overflowY="visible";
	}
	Left();
}
</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://www.codefans.net/jscss/demoimg/200905/left.gif" border=0 onmouseout=normal() onmouseover=plusSpeed() style="CURSOR: pointer" /></TD>
    <TD>
      <DIV id="marquees1">
      <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://www.codefans.net/jscss/demoimg/wall_s9.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://www.codefans.net/jscss/demoimg/wall_s1.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://www.codefans.net/jscss/demoimg/wall_s2.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://www.codefans.net/jscss/demoimg/wall_s3.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://www.codefans.net/jscss/demoimg/wall_s4.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://www.codefans.net/jscss/demoimg/wall_s5.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://www.codefans.net/jscss/demoimg/wall_s6.jpg' border=0 /></td>
</tr><tr><td><div align="center">第7期</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://www.codefans.net/jscss/demoimg/wall_s7.jpg' border=0 /></td>
</tr><tr><td><div align="center">第8期</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://www.codefans.net/jscss/demoimg/200905/right.gif" border=0 onmouseout=normal() onmouseover=plusSpeed() /></TD>
</TR></TABLE>
</body>
</html>


本回答被提问者采纳






已赞过已踩过<

你对这个回答的评价是？
评论收起

推荐律师服务：若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询

html 图片左右自动滚动js实现效果

其他类似问题

为你推荐：