小圖可放大連續(xù)滾動圖片【實用代碼】

紫百合6688 2011-08-28

展開全文

小圖可放大的連續(xù)橫向滾動圖片展示

左鍵點擊小圖可另開視窗放大圖片

代碼：

<center>
            <div id="marquee_demo" style="overflow:hidden;width:500px;text-align:center;border:1px solid #0066cc">
            <table cellspacing="0" cellpadding="3" align="center" border="0">
            <tr>
            <td id="marquee_product1" valign="top">
            <table width="500" height="100" border="0" cellpadding="2" cellspacing="0" align=center>
            <tr>
            <td>
            <a target="_blank" href="圖片網(wǎng)址1"><img src="圖片網(wǎng)址1" width=100></a><br>1</td>
            <td>
            <a target="_blank" href="圖片網(wǎng)址2"><img src="圖片網(wǎng)址2" width=100></a><br>2</td>
            <td>
            <a target="_blank" href="圖片網(wǎng)址3"><img src="圖片網(wǎng)址3" width=100></a><br>3</td>
            <td>
            <a target="_blank" href="圖片網(wǎng)址4"><img src="圖片網(wǎng)址4" width=100></a><br>4</td>
            <td>
            <a target="_blank" href="圖片網(wǎng)址5"><img src="圖片網(wǎng)址5" width=100></a><br>5</td>
            </tr>
            </table>
            </td>
            <td id="marquee_product2" valign="top"></td>
            </tr>
            </table>
            </div></center>
            <script type="text/javascript">
            var speed=30;
            marquee_product2.innerHTML=marquee_product1.innerHTML;
            function Marquee(){
            if(marquee_demo.scrollLeft>=marquee_product1.scrollWidth){
            marquee_demo.scrollLeft=0;
            }
            else{
            marquee_demo.scrollLeft++;
            }
            }
            var MyMar=setInterval(Marquee,speed);
            marquee_demo.onmouseover=function(){clearInterval(MyMar);}
            marquee_demo.onmouseout=function(){MyMar=setInterval(Marquee,speed);}
            </script>