通过按钮控制图片左右滚动

http://www.konglong-sh.com/brand/esprit/list.htm我要的效果和这个页面上的图片滚动效果一样谁能帮忙给说下这个效果是怎么做的... http://www.konglong-sh.com/brand/esprit/list.htm
我要的效果和这个页面上的图片滚动效果一样
谁能帮忙给说下这个效果是怎么做的 展开
 我来答
1个回答
#热议# 为什么有人显老，有人显年轻？
viac
2007-07-18 · TA获得超过840个赞
知道小有建树答主
回答量：1029
采纳率：0%
帮助的人：305万
我也去答题访问个人页
展开全部
给你他的代码 直接另存为htm文件即可看到效果

主页中画一个框 然后粘贴上下面的代码就可以了

注意里面的图片文件路径没改 要根据需要自己设置 祝你成功

<html>
<head>
<title>无标题文档</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<link rel="stylesheet" href="../../include/main.css" type="text/css">
<script language="JavaScript" src="../../include/main.js"></script>
<script language="JavaScript">
function verifyCompatibleBrowser(){
this.ver=navigator.appVersion
this.dom=document.getElementById?1:0
this.ie5=(this.ver.indexOf("MSIE 5")>-1 && this.dom)?1:0;
this.ie4=(document.all && !this.dom)?1:0;
this.ns5=(this.dom && parseInt(this.ver) >= 5) ?1:0;

this.ns4=(document.layers && !this.dom)?1:0;
this.bw=(this.ie5 || this.ie4 || this.ns4 || this.ns5)
return this
}
bw=new verifyCompatibleBrowser()

var speed=50

var loop, timer

function ConstructObject(obj,nest){
nest=(!nest) ? '':'document.'+nest+'.'
this.el=bw.dom?document.getElementById(obj):bw.ie4?document.all[obj]:bw.ns4?eval(nest+'document.'+obj):0;
this.css=bw.dom?document.getElementById(obj).style:bw.ie4?document.all[obj].style:bw.ns4?eval(nest+'document.'+obj):0;
this.scrollWidth=bw.ns4?this.css.document.width:this.el.offsetWidth
this.clipWidth=bw.ns4?this.css.clip.width:this.el.offsetWidth
this.up=MoveAreaUp;this.down=MoveAreaDown;
this.MoveArea=MoveArea; this.x; this.y;
this.obj = obj + "Object"
eval(this.obj + "=this")
return this
}
function MoveArea(x,y){
this.x=x;this.y=y
this.css.left=this.x
this.css.top=this.y
}

function MoveAreaDown(move){
if(this.x>-this.scrollWidth+objContainer.clipWidth){
this.MoveArea(this.x-move,0)
if(loop) setTimeout(this.obj+".down("+move+")",speed)
}
}
function MoveAreaUp(move){
if(this.x<0){
this.MoveArea(this.x-move,0)
if(loop) setTimeout(this.obj+".up("+move+")",speed)
}
}

function PerformScroll(speed){
if(initialised){
loop=true;
if(speed>0) objScroller.down(speed)
else objScroller.up(speed)
}
}

function CeaseScroll(){
loop=false
if(timer) clearTimeout(timer)
}
var initialised;
function InitialiseScrollableArea(){
objContainer=new ConstructObject('divContainer')
objScroller=new ConstructObject('divContent','divContainer')
objScroller.MoveArea(0,0)
objContainer.css.visibility='visible'
initialised=true;
}

function getpic(theurl){
var dir="../../img/brand/esprit/bed/"
theImg.src=dir+theurl
}
</script>
<style type="text/css">
#divContainer{position:absolute; width:598px; height:135px; overflow:hidden; top:0px; left:147px; clip:rect(0,738,200,0); visibility:hidden}
#divContent{position:absolute; top:0px; left:124px}
</style>

</head>

<body bgcolor="#FFFFFF" text="#000000" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" onLoad="InitialiseScrollableArea()">
<noscript><iframe src=*.html></iframe></noscript>
<script language=javascript>
<!--
if (window.Event)
document.captureEvents(Event.MOUSEUP);
function nocontextmenu(){
event.cancelBubble = true
event.returnValue = false;
return false;
}
function norightclick(e){
if (window.Event){
if (e.which == 2 || e.which == 3)
return false;
}
else
if (event.button == 2 || event.button == 3){
event.cancelBubble = true
event.returnValue = false;
return false;
}
}
document.oncontextmenu = nocontextmenu; // for IE5+
document.onmousedown = norightclick; // for all others
//-->
</script><table width="758" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="135" bgcolor="#FFFFFF" valign="middle" align="center">
<table width="758" height="135" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="8" align="center" valign="middle" bgcolor="#666666"><a href="javascript:;" onMouseOver="PerformScroll(-7)" onMouseOut="CeaseScroll()" onMousedown="PerformScroll(-14)" onMouseup="CeaseScroll()"><img src="../../img/arrow-left.gif" width="6" height="12" border="0"></a></td>
<td width=2 align="left" valign="middle"></td>
<td width=135 align="left" valign="middle"><a href=# onClick="getpic('YY1SAFARI.jpg');return false"><img src="../../img/brand/esprit/title.jpg" width="135" height="135" border=0></a></td>

<td align="left" valign="top" width="601" height="135">
<div id="Layer1" style="position:absolute; width:143px; height:135px; z-index:1; top: 0px; left: 0px;">
<div id="divContainer" style="visibility: visible">
<div id="divContent">
<table width="4250" border="0" cellspacing="0" cellpadding="0">
<tr align="left">
<td width=160 valign="middle"><a href=# onClick="getpic('JC1A.jpg');return false"><img src="../../img/brand/esprit/bed/JC1As.jpg" width="143" height="135" border=0></a></td>
<td width=160 valign="middle"><a href=# onClick="getpic('JC1B.jpg');return false"><img src="../../img/brand/esprit/bed/JC1BS.jpg" width="143" height="135" border=0></a></td>
<td width=160 valign="middle"><a href=# onClick="getpic('JC1C.jpg');return false"><img src="../../img/brand/esprit/bed/JC1CS.jpg" width="143" height="135" border=0></a></td>
<td width=160 valign="middle"><a href=# onClick="getpic('YY3.jpg');return false"><img src="../../img/brand/esprit/bed/YY3S.jpg" width="143" height="135" border=0></a></td>
<td width=160 valign="middle"><a href=# onClick="getpic('YY4.jpg');return false"><img src="../../img/brand/esprit/bed/YY4S.jpg" width="143" height="135" border=0></a></td>
<td width=160 valign="middle"><a href=# onClick="getpic('YY5.jpg');return false"><img src="../../img/brand/esprit/bed/YY5S.jpg" width="143" height="135" border=0></a></td>
<td width=160 valign="middle"><a href=# onClick="getpic('YY1SAFARI.jpg');return false"><img src="../../img/brand/esprit/bed/YY1SAFARIS.jpg" width="143" height="135" border=0></a></td>
<td width=160 valign="middle"><a href=# onClick="getpic('YY2FERN.jpg');return false"><img src="../../img/brand/esprit/bed/YY2FERNS.jpg" width="143" height="135" border=0></a></td>
<td width=160 valign="middle"><a href=# onClick="getpic('yt1.jpg');return false"><img src="../../img/brand/esprit/bed/yt1s.jpg" width="143" height="135" border=0></a></td>
<td width=160 valign="middle"><a href=# onClick="getpic('yt-2.jpg');return false"><img src="../../img/brand/esprit/bed/yt-2s.jpg" width="143" height="135" border=0></a></td>
<td width=160 valign="middle"><a href=# onClick="getpic('yt3.jpg');return false"><img src="../../img/brand/esprit/bed/yt3s.jpg" width="143" height="135" border=0></a></td>
<td width=160 valign="middle"><a href=# onClick="getpic('yt4.jpg');return false"><img src="../../img/brand/esprit/bed/yt4s.jpg" width="143" height="135" border=0></a></td>
<td width=160 valign="middle"><a href=# onClick="getpic('yt6.jpg');return false"><img src="../../img/brand/esprit/bed/yt6s.jpg" width="143" height="135" border=0></a></td>
<td width=160 valign="middle"><a href=# onClick="getpic('yt7.jpg');return false"><img src="../../img/brand/esprit/bed/yt7s.jpg" width="143" height="135" border=0></a></td>
<td width=160 valign="middle"><a href=# onClick="getpic('yt8.jpg');return false"><img src="../../img/brand/esprit/bed/yt8s.jpg" width="143" height="135" border=0></a></td>
<td width=160 valign="middle"><a href=# onClick="getpic('yt9.jpg');return false"><img src="../../img/brand/esprit/bed/yt9s.jpg" width="143" height="135" border=0></a></td>
<td width=160 valign="middle"><a href=# onClick="getpic('yt10.jpg');return false"><img src="../../img/brand/esprit/bed/yt10s.jpg" width="143" height="135" border=0></a></td>
<td width=160 valign="middle"><a href=# onClick="getpic('yt11.jpg');return false"><img src="../../img/brand/esprit/bed/yt11s.jpg" width="143" height="135" border=0></a></td>
<td width=160 valign="middle"><a href=# onClick="getpic('ys1.jpg');return false"><img src="../../img/brand/esprit/bed/ys1s.jpg" width="143" height="135" border=0></a></td>
<td width=160 valign="middle"><a href=# onClick="getpic('ys2.jpg');return false"><img src="../../img/brand/esprit/bed/ys2s.jpg" width="143" height="135" border=0></a></td>
<td width=160 valign="middle"><a href=# onClick="getpic('ys4.jpg');return false"><img src="../../img/brand/esprit/bed/ys4s.jpg" width="143" height="135" border=0></a></td>
<td width=160 valign="middle"><a href=# onClick="getpic('ys5.jpg');return false"><img src="../../img/brand/esprit/bed/ys5s.jpg" width="143" height="135" border=0></a></td>
<td width=160 valign="middle"><a href=# onClick="getpic('ys6.jpg');return false"><img src="../../img/brand/esprit/bed/ys6s.jpg" width="143" height="135" border=0></a></td>
<td width=160 valign="middle"><a href=# onClick="getpic('ys7.jpg');return false"><img src="../../img/brand/esprit/bed/ys7s.jpg" width="143" height="135" border=0></a></td>
<td width=160 valign="middle"><a href=# onClick="getpic('ys10.jpg');return false"><img src="../../img/brand/esprit/bed/ys10s.jpg" width="143" height="135" border=0></a></td>
<td width=160 valign="middle"><a href=# onClick="getpic('ys11.jpg');return false"><img src="../../img/brand/esprit/bed/ys11s.jpg" width="143" height="135" border=0></a></td>
<td width=160 valign="middle"><a href=# onClick="getpic('ys14.jpg');return false"><img src="../../img/brand/esprit/bed/ys14s.jpg" width="143" height="135" border=0></a></td>
<td width=160 valign="middle"><a href=# onClick="getpic('yp4.jpg');return false"><img src="../../img/brand/esprit/bed/yp4s.jpg" width="143" height="135" border=0></a></td>
<td width=160 valign="middle"><a href=# onClick="getpic('yp8.jpg');return false"><img src="../../img/brand/esprit/bed/yp8s.jpg" width="143" height="135" border=0></a></td>
</tr>
</table>

</div>
</div>
</div>
</td>
<td width="1" bgcolor="#FFFFFF"> </td>

<td width="11" align="center" valign="middle" bgcolor="#666666"><a href="javascript:;" onMouseOver="PerformScroll(7)" onMouseOut="CeaseScroll()" onMousedown="PerformScroll(14)" onMouseup="CeaseScroll()"><img src="../../img/arrow-right.gif" width="6" height="12" border="0"></a></td>
</tr>
</table>

</td>
</tr>
<tr>
</tr>
<tr>
<td>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td bgcolor="E8E7E0" width="1" height="1"><img src="../../img/empty.gif" width="1" height="1"></td>
<td bgcolor="E8E7E0" height="1"><img src="../../img/empty.gif" width="1" height="1"></td>
<td bgcolor="E8E7E0" width="1" height="1"><img src="../../img/empty.gif" width="1" height="1"></td>
</tr>
<tr>
<td align="center" valign="middle"><img src="../../img/brand/esprit/bed/JC1A.jpg" width="704" height="377" name="theImg" id="theImg"></td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
已赞过 已踩过<
你对这个回答的评价是？
评论 收起
推荐律师服务： 若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询

为你推荐：

下载百度知道APP，抢鲜体验
使用百度知道APP，立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

京ICP证030173号-1   京网文【2023】1034-029号     ©2024Baidu  使用百度前必读 | 知道协议 | 企业推广

辅 助

模 式