html中图片走马灯效果

<!-- 走马灯效果 -->
<div id="demo" style="overflow:hidden;height:128;width:573;color:#ffffff">
  <table border="0" align="left" cellpadding="0" cellspacing="0" cellspace="0">
  <tr>
    <td height="85" valign="top" id="demo1">
      <table width="100%"  border="0" cellspacing="0" cellpadding="0">
          <tr>
            <td><a href="#"><img src="/dede/uploads/zoumadeng/1.jpg" width="128" height="128" border="0"></a></td>
            <td><a href="#"><img src="/dede/uploads/zoumadeng/2.jpg" width="128" height="128" border="0"></a></td>
            <td><a href="#"><img src="/dede/uploads/zoumadeng/3.jpg" width="128" height="128" border="0"></a></td>
            <td><a href="#"><img src="/dede/uploads/zoumadeng/4.jpg" width="128" height="128" border="0"></a></td>
            <td><a href="#"><img src="/dede/uploads/zoumadeng/5.jpg" width="128" height="128" border="0"></a></td>
            <td><a href="#"><img src="/dede/uploads/zoumadeng/6.jpg" width="128" height="128" border="0"></a></td>
            <td><a href="#"><img src="/dede/uploads/zoumadeng/7.jpg" width="128" height="128" border="0"></a></td>
            <td><a href="#"><img src="/dede/uploads/zoumadeng/8.jpg" width="128" height="128" border="0"></a></td>
            <td><a href="#"><img src="/dede/uploads/zoumadeng/9.jpg" width="128" height="128" border="0"></a></td>
            <td><a href="#"><img src="/dede/uploads/zoumadeng/10.jpg" width="128" height="128" border="0"></a></td>
          </tr>
        </table>
    </td>
    <td id="demo2" valign="top"></td>
  </tr>
  </table>
</div>
<script>
var speed=30
demo2.innerHTML=demo1.innerHTML
function Marquee(){
if(demo2.offsetWidth-demo.scrollLeft<=0)
demo.scrollLeft-=demo1.offsetWidth
else{
demo.scrollLeft++
}
}
var MyMar=setInterval(Marquee,speed)
demo.onmouseover=function() {clearInterval(MyMar);}
demo.onmouseout=function() {MyMar=setInterval(Marquee,speed);}

 function bigger(){
  img.style.width = '400px';
  img.style.height = '400px';
 }
 
 function smaller(){
  img.style.width = '100px';
  img.style.height = '100px';
 }

</script>
<!-- end 走马灯效果 -->

上面没有实现放大效果。

下面这个结合lightbox实现点击放大：

<!-- 走马灯效果 -->
<script type="text/javascript" src="/dede/lightbox2.02/js/prototype.js"></script>
<script type="text/javascript" src="/dede/lightbox2.02/js/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="/dede/lightbox2.02/js/lightbox.js"></script>
<link rel="stylesheet" href="/dede/lightbox2.02/css/lightbox.css" type="text/css" media="screen" />
<div id="demo" style="overflow:hidden;height:128;width:573;color:#ffffff">
  <table border="0" align="left" cellpadding="0" cellspacing="0" cellspace="0">
  <tr>
    <td height="85" valign="top" id="demo1">
      <table width="100%"  border="0" cellspacing="0" cellpadding="0">
          <tr>
            <td><a href="/dede/uploads/zoumadeng/1.jpg" rel="lightbox[roadtrip]" title="1"><img src="/dede/uploads/zoumadeng/1.jpg" width="128" height="128" border="0"></a></td>
            <td><a href="/dede/uploads/zoumadeng/2.jpg" rel="lightbox[roadtrip]" title = "2"><img src="/dede/uploads/zoumadeng/2.jpg" width="128" height="128" border="0"></a></td>
            <td><a href="/dede/uploads/zoumadeng/3.jpg" rel="lightbox[roadtrip]" title = "3"><img src="/dede/uploads/zoumadeng/3.jpg" width="128" height="128" border="0"></a></td>
            <td><a href="/dede/uploads/zoumadeng/4.jpg" rel="lightbox[roadtrip]" title = "4"><img src="/dede/uploads/zoumadeng/4.jpg" width="128" height="128" border="0"></a></td>
            <td><a href="/dede/uploads/zoumadeng/5.jpg" rel="lightbox[roadtrip]" title = "5"><img src="/dede/uploads/zoumadeng/5.jpg" width="128" height="128" border="0"></a></td>
            <td><a href="/dede/uploads/zoumadeng/5.jpg" rel="lightbox[roadtrip]" title = "5"><img src="/dede/uploads/zoumadeng/6.jpg" width="128" height="128" border="0"></a></td>
            <td><a href="/dede/uploads/zoumadeng/7.jpg" rel="lightbox[roadtrip]" title = "7"><img src="/dede/uploads/zoumadeng/7.jpg" width="128" height="128" border="0"></a></td>
            <td><a href="/dede/uploads/zoumadeng/8.jpg" rel="lightbox[roadtrip]" title = "8"><img src="/dede/uploads/zoumadeng/8.jpg" width="128" height="128" border="0"></a></td>
            <td><a href="/dede/uploads/zoumadeng/9.jpg" rel="lightbox[roadtrip]" title = "9"><img src="/dede/uploads/zoumadeng/9.jpg" width="128" height="128" border="0"></a></td>
            <td><a href="/dede/uploads/zoumadeng/10.jpg" rel="lightbox[roadtrip]" title = "10"><img src="/dede/uploads/zoumadeng/10.jpg" width="128" height="128" border="0"></a></td>
          </tr>
        </table>
    </td>
    <td id="demo2" valign="top"></td>
  </tr>
  </table>
</div>
<script>
var speed=30
demo2.innerHTML=demo1.innerHTML
function Marquee(){
if(demo2.offsetWidth-demo.scrollLeft<=0)
demo.scrollLeft-=demo1.offsetWidth
else{
demo.scrollLeft++
}
}
var MyMar=setInterval(Marquee,speed)
demo.onmouseover=function() {clearInterval(MyMar);}
demo.onmouseout=function() {MyMar=setInterval(Marquee,speed);}

</script>
<!-- end 走马灯效果 -->