<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>&nbsp;
<a href="images/2.jpg" onClick="ShowPic(this);return false;"><img src="images/2.jpg" width=100 height="100" border="0"></a>&nbsp;
<a href="images/3.jpg" onClick="ShowPic(this);return false;"><img src="images/3.jpg" width=100 height="100" border="0"></a>&nbsp;
<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>