<img src="images/no.jpg" id="pic"><!--此处为你点击时,显示的图片-->
<div id=demo style="width:300;overflow:hidden;"> <!--滚动条设置为隐藏,为了便于理解,你可以设置成auto,再看看效果-->
<table>
<tr>
<td id=demo1>
<a href="images/1.jpg" onClick="ShowPic(this);return false;"><img src="images/1.jpg" width=100 height="100" border="0"></a>
<a href="images/2.jpg" onClick="ShowPic(this);return false;"><img src="images/2.jpg" width=100 height="100" border="0"></a>
<a href="images/3.jpg" onClick="ShowPic(this);return false;"><img src="images/3.jpg" width=100 height="100" border="0"></a>
<a href="images/4.jpg" onClick="ShowPic(this);return false;"><img src="images/4.jpg" width=100 height="100" border="0"></a></td>
<td id=demo2></td>
</tr>
</table>
</div><script language="javascript">
var speed=10 //定义速度,实际是下面滚动函数的执行间隔时间,值越小滚动越快
demo2.innerHTML=demo1.innerHTML //将demo1中的内容复制到demo2
function Marquee(){ //定义一个图片滚动函数
if(demo.scrollLeft-demo2.offsetWidth>=0)demo.scrollLeft-=demo2.offsetWidth //当滚动条的位置大于demo2的宽度时,滚动条退回一个demo2的宽度
else{
demo.scrollLeft++ //否则,滚动条继续向右滚动[图片向左滚动]
}
}
var MyMar=setInterval(Marquee,speed) //设置定时器,使滚动函数每10毫秒运行一次
demo.onmouseover=function(){clearInterval(MyMar);}//鼠标经过时,清除定时器,停止执行滚动函数
demo.onmouseout=function(){MyMar=setInterval(Marquee,speed);}//鼠标离开,继续滚动,执行滚动函数function ShowPic(whichpic){//定义一个显示图片函数
var source=whichpic.getAttribute("href");//获得超链接属性
document.getElementById("pic").setAttribute("src",source);//设置显示图片的属性
}
</script>
<div id=demo style="width:300;overflow:hidden;"> <!--滚动条设置为隐藏,为了便于理解,你可以设置成auto,再看看效果-->
<table>
<tr>
<td id=demo1>
<a href="images/1.jpg" onClick="ShowPic(this);return false;"><img src="images/1.jpg" width=100 height="100" border="0"></a>
<a href="images/2.jpg" onClick="ShowPic(this);return false;"><img src="images/2.jpg" width=100 height="100" border="0"></a>
<a href="images/3.jpg" onClick="ShowPic(this);return false;"><img src="images/3.jpg" width=100 height="100" border="0"></a>
<a href="images/4.jpg" onClick="ShowPic(this);return false;"><img src="images/4.jpg" width=100 height="100" border="0"></a></td>
<td id=demo2></td>
</tr>
</table>
</div><script language="javascript">
var speed=10 //定义速度,实际是下面滚动函数的执行间隔时间,值越小滚动越快
demo2.innerHTML=demo1.innerHTML //将demo1中的内容复制到demo2
function Marquee(){ //定义一个图片滚动函数
if(demo.scrollLeft-demo2.offsetWidth>=0)demo.scrollLeft-=demo2.offsetWidth //当滚动条的位置大于demo2的宽度时,滚动条退回一个demo2的宽度
else{
demo.scrollLeft++ //否则,滚动条继续向右滚动[图片向左滚动]
}
}
var MyMar=setInterval(Marquee,speed) //设置定时器,使滚动函数每10毫秒运行一次
demo.onmouseover=function(){clearInterval(MyMar);}//鼠标经过时,清除定时器,停止执行滚动函数
demo.onmouseout=function(){MyMar=setInterval(Marquee,speed);}//鼠标离开,继续滚动,执行滚动函数function ShowPic(whichpic){//定义一个显示图片函数
var source=whichpic.getAttribute("href");//获得超链接属性
document.getElementById("pic").setAttribute("src",source);//设置显示图片的属性
}
</script>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 有这个就不会滚动了