求优秀的多张图片滚动代码

要求：
1.兼容IE，FF，SAFARI等浏览器；
2.在各浏览器运行效果一致；
3.滚动时间间隔不高于20毫秒。

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

试看，根据你的需要图片URL地址自己在红色部分修改，...<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>图片向前向后滚动浏览</title>
</head>
<style type="text/css">
span{font-family:verdana; font-size:12px; font-weight:bold; cursor:pointer; border:1px solid #CCCCCC; padding:5px; margin:5px;}
label{font-family:verdana; font-size:12px; font-weight:normal; cursor:pointer; padding:5px; margin:5px;}
.curimg{border:1px solid red; padding:1px; margin:1px; background-color:#FFFFFF;}
</style>
<body>
<table style="border:1px solid red;" width="100%"  border="0">
  <tr>
    <td align="right"><span onClick="javascript:nextPic(-1);"><< previous</span></td>
    <td align="center"><img id="bigPic01" src="par09_par01_xb_logo04.jpg" border="0" onClick="javascript:nextPic(1);" style="cursor:pointer;"></td>
    <td align="left"><span onClick="javascript:nextPic(1);">NEXT >></span></td>
  </tr>
</table>
<br>
<table width="100%" border="0" style="border:1px solid #DDDDDD;">
  <tr>
    
<td id="smallPic" style="width:auto; overflow:auto;"> </td>

  </tr>
</table>
<script type="text/javascript" language="javascript">
var picstr="iPhone001.jpg,iPhone002.jpg,iPhone003.jpg,iPhone004.jpg";
//把每张(带路径的)图片添加到上面的字符串中,每个图片之间用逗号(,)分隔开,图片文件的名称中不能有逗号
var pics=picstr.split(",");
var n=0;
function nextPic(i)
{
//FUNCTION:实现向后向前翻; i < 0 向前翻, i > 0 向后翻
var o=document.getElementById("bigPic01");
n=n+i;
if(n>=pics.length-1) n=pics.length-1;
if (n<0) n=0;if (pics[n]!="") {
o.src=pics[n];
document.getElementById("spic"+n).className="curimg";

if(n>=0&&n<pics.length-1)
document.getElementById("spic"+(n+1)).className="";

if(n<=pics.length-1&&n>0)
document.getElementById("spic"+(n-1)).className="";
}if (n==0) alert("这是第一张了");
if (n==pics.length-1) alert("这是最后一张了");
}//-------------------------------------------------------------
function displayPic(src)
{
//FUNCTION:实现点击哪张显示那张，同时设置n变量
var picSrc=src;
var sp;
var o=document.getElementById("bigPic01");
if (picSrc!="")
o.src=picSrc;
for(var k=0;k<pics.length;k++)
{
sp=document.getElementById("spic"+k);
if (sp.src==picSrc)
sp.className="curimg";
else
sp.className="";
}
}//-------------------------------------------------------------
function setSmallPic(objID)
{
//FUNCTION:建立并显示小(缩略)图片
var w=100; //缩略图宽度
var h=80; //缩略图高度
var oid=objID; //存放缩略图的容器对象的ID号;
var xStart="<img width=\""+w+"\" height=\""+h+"\" src=\"";
var xEnd=">"
var smallPics="";
for(var j=0;j<pics.length;j++)
{
if(pics[j]!=""){
if (j==0)
smallPics=smallPics+xStart+pics[j]+"\" id=\"spic"+j+"\" class=\"curimg\" onclick=\"javascript:displayPic(this.src);n=0\""+xEnd;
else
smallPics=smallPics+xStart+pics[j]+"\" id=\"spic"+j+"\" onclick=\"javascript:displayPic(this.src);n="+j+"\""+xEnd;
}
}
var objCon=document.getElementById(oid);
objCon.innerHTML=smallPics;
}
setSmallPic("smallPic");
</script>
<label>
图片滚动实现向前向后翻，或直接点击某张显示...
</label>
</body>
</html>
http://hi.baidu.com/sjcz/blog/item/ec5d500e2d7d44cd7acbe171.html
http://blog.csdn.net/wtcsy/archive/2009/05/24/4213118.aspx
你看看人家做的，很牛的
http://www.cnblogs.com/cloudgamer/archive/2008/07/06/1236770.html这里还有很多NB的代码，GOOD LUCK！
<!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>无标题文档</title>
</head><body><div id="demo" style=" position:absolute;overflow:hidden;height:600px;width:180px;background:#214984;color:#ffffff">
<div id="demo1">
             <p>a</p>
<p>afdfd</p>
<p>aswrewr</p>
<p>arrewr</p>
<p>agsdgdsf</p>
  <p>a</p>
<p>afrwerewdfd</p>
<p>aswrklklkllewr</p>
<p>arreiooeq89434wr</p>
<p>agsd12421312gdsf</p>
</div>
<div id=demo2></div>

      </div>


         <script type="text/javascript">
var speed=30;
var demo=document.getElementById("demo");
var demo1=document.getElementById("demo1");
var demo2=document.getElementById("demo2");
document.getElementById("demo2").innerHTML=document.getElementById("demo1").innerHTML;
document.getElementById("demo").scrollTop=document.getElementById("demo").scrollHeight;
function Marquee(){
//offsetTop: 元素相对版面或父元素的上侧的距离
//offsetHeight:元素的绝对高度,不包括overflow隐藏未显示的部分,即:实际占用的高度
//scrollTop: 当外层元素设置了scrollTop时,内层元素不能完全显示在外层元素中,那么内层元素就要"卷"起来,这个高度就是scrollTop
//scrollHeight 是内层元素的实际高度 + 外层元素 padding，包含内层元素的隐藏的部分。if(demo1.offsetTop-demo.scrollTop>=0)
demo.scrollTop+=demo2.offsetHeight;
else{
demo.scrollTop--;
}
}
var MyMar=setInterval(Marquee,speed);
demo.onmouseover=function() {clearInterval(MyMar)}
demo.onmouseout=function() {MyMar=setInterval(Marquee,speed);}
</script>
</body>
</html>
DEMO:
<div id="demo" style="overflow:hidden;height:143px;width:586px;">
<table border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td id="marquePic1">
<table width="100%" border="0" cellpadding="0" cellspacing="0" align="center">
<tr>
<script language="javascript">
for(var i=1;i<=10;i++){
document.writeln("<td height='143' align='center'>");
document.writeln("  <img src='images/xxxx.gif' height='110' width='110' border='1'>  <br>");
document.writeln("<font color='#3d8737'>说明"+i+"</font></td>");
}
</script>
</tr></table>
</td>
<td id="marquePic2"></td>
</tr></table>
</div>
<script language="javascript">
var speed=1;
marquePic2.innerHTML=marquePic1.innerHTML;
function Marquee(){
if(demo.scrollLeft>=marquePic1.scrollWidth){
demo.scrollLeft=0;
}else{
demo.scrollLeft++;
}
}
var MyMar=setInterval(Marquee,speed);
demo.onmouseover=function(){clearInterval(MyMar)}
demo.onmouseout=function(){MyMar=setInterval(Marquee,speed)}
</script>
谢谢楼上几位的帮助，不过还是没符合我的.....
我就要简单的持续的滚动就可以，然后符合下面的要求
1.兼容IE，FF，SAFARI等浏览器；
2.在各浏览器运行效果一致；
3.滚动时间间隔不高于20毫秒。