当前位置：首页 → 问答吧 → 一个无缝滚动JS重复使用的问题

一个无缝滚动JS重复使用的问题

时间：2010-05-13

来源：互联网

问题：这个是来自网上的一段代码，我不懂js。我要在页面上多次使用这个效果，当复制一个效果就没了。就是说这段代码没扩展性。

求助各位js高手把代码改下能在一个页面上两次使用就可以了。
小弟谢各位ile

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <HEAD> <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=gb2312"> <title>点击左右滚动产品展示代码(带文字说明)_懒人建站-http://www.51xuediannao.com</title> <style type="text/css"> .rollBox img{border:none;} .rollBox{width:680px;overflow:hidden;margin:0 auto;} .rollBox .Cont{width:620px;overflow:hidden;margin:0 auto;padding-top:20px;} .rollBox .ScrCont{width:10000000px;} .rollBox .Cont .pic{width:130px;float:left;text-align:center;padding-right:20px;} *+html .rollBox .Cont .pic{width:130px;float:left;text-align:center;padding-right:30px;} .rollBox .Cont .pic img{padding:4px;background:#fff;border:1px solid #ccc;display:block;margin:0 auto;} .rollBox .Cont .pic p{line-height:26px;color:#505050;} .rollBox .Cont a:link,.rollBox .Cont a:visited{color:#626466;text-decoration:none;} .rollBox .Cont a:hover{color:#f00;text-decoration:underline;} .rollBox #List1,.rollBox #List2{float:left;} .img1,.img2,.Cont{ float:left;} .img1,.img2{ width:25px; height:105px; display:block; cursor:pointer; margin-top:20px; } .img1{ background-image:url(http://www.51xuediannao.com/uploads/soft/Slide/gundongzhanshi/shqm_left_pic.gif); background-repeat: no-repeat; background-position: center center;} .img2{ background-image:url(http://www.51xuediannao.com/uploads/soft/Slide/gundongzhanshi/shqm_right_pic.gif); background-repeat: no-repeat; background-position: center center; } </style> </HEAD> <body> <div class="rollBox"> <a href="javascript:;" onmousedown="ISL_GoDown()" onmouseup="ISL_StopDown()" onmouseout="ISL_StopDown()" class="img1" hidefocus="true"></a> <div class="Cont" id="ISL_Cont"> <div class="ScrCont"> <div id="List1">  <div class="pic"> <a href="#" target="_blank"><img src="http://www.51xuediannao.com/uploads/soft/Slide/gundongzhanshi/show_1.jpg" width="130" height="95" /></a> <a href="#" target="_blank">相关产品图片浏览001</a> </div> <div class="pic"> <a href="#" target="_blank"><img src="http://www.51xuediannao.com/uploads/soft/Slide/gundongzhanshi/show_1.jpg" width="130" height="95" /></a> <a href="#" target="_blank">相关产品图片浏览002</a> </div> <div class="pic"> <a href="#" target="_blank"><img src="http://www.51xuediannao.com/uploads/soft/Slide/gundongzhanshi/show_1.jpg" width="130" height="95" /></a> <a href="#" target="_blank">相关产品图片浏览003</a> </div> <div class="pic"> <a href="#" target="_blank"><img src="http://www.51xuediannao.com/uploads/soft/Slide/gundongzhanshi/show_1.jpg" width="130" height="95" /></a> <a href="#" target="_blank">相关产品图片浏览004</a> </div> <div class="pic"> <a href="#" target="_blank"><img src="http://www.51xuediannao.com/uploads/soft/Slide/gundongzhanshi/show_1.jpg" width="130" height="95" /></a> <a href="#" target="_blank">相关产品图片浏览005</a> </div> <div class="pic"> <a href="#" target="_blank"><img src="http://www.51xuediannao.com/uploads/soft/Slide/gundongzhanshi/show_1.jpg" width="130" height="95" /></a> <a href="#" target="_blank">相关产品图片浏览006</a> </div> <div class="pic"> <a href="#" target="_blank"><img src="http://www.51xuediannao.com/uploads/soft/Slide/gundongzhanshi/show_1.jpg" width="130" height="95" /></a> <a href="#" target="_blank">相关产品图片浏览007</a> </div> <div class="pic"> <a href="#" target="_blank"><img src="http://www.51xuediannao.com/uploads/soft/Slide/gundongzhanshi/show_1.jpg" width="130" height="95" /></a> <a href="#" target="_blank">相关产品图片浏览008</a> </div> <div class="pic"> <a href="#" target="_blank"><img src="http://www.51xuediannao.com/uploads/soft/Slide/gundongzhanshi/show_1.jpg" width="130" height="95" /></a> <a href="#" target="_blank">相关产品图片浏览009</a> </div> <div class="pic"> <a href="#" target="_blank"><img src="http://www.51xuediannao.com/uploads/soft/Slide/gundongzhanshi/show_1.jpg" width="130" height="95" /></a> <a href="#" target="_blank">相关产品图片浏览010</a> </div>  </div> <div id="List2"></div> </div> </div> <a href="javascript:;" onmousedown="ISL_GoUp()" onmouseup="ISL_StopUp()" onmouseout="ISL_StopUp()" class="img2" hidefocus="true"></a> </div> <script language="javascript" type="text/javascript"> <![CDATA[//><!]]> </script> <br><br> </div> </body> </html>
提示：您可以先修改部分代码再运行

[ 本帖最后由 xdz20080 于 2010-5-13 10:03 编辑 ]

作者: xdz20080 发布时间: 2010-05-13

收藏了

作者: yaya1202 发布时间: 2010-05-13

你想在页面上，多次便用

就要改ID的

所有具有唯一识别的字段都都改一下

就OK、了。我用了，这个支持FF

不错

作者: yaya1202 发布时间: 2010-05-13

看着好眼熟的东西最简单的方法就是楼上所说的把ID名字查找全部替换一下包括CSS JS HTML里

作者: AyumiHamasaki 发布时间: 2010-05-13