2015-10-15

圖片連續跑馬燈製作使用 javascript 之解法

不久前在使用 html5 與 css 製作圖片跑馬燈時遇到一個問題：
「網頁載入時是空白的，接著才跑出第一張，跑到最後一張時接著又要空白一次」

有沒有辦法製作出「圖片連續跑馬燈」的效果，答案是：「有的！」
用 javascript 即可實現此效果：



<td id="pic1">
    <table>
        <tr>
            <td><img src="圖片1路徑"/></td>
            <td><img src="圖片2路徑"/></td>
            <td><img src="圖片3路徑"/></td>
            <td><img src="圖片4路徑"/></td>
            <td><img src="圖片5路徑"/></td>
        </tr>
    </table>
</td>
<td id="pic2"></td>

<script>
    var speed=10
    pic2.innerHTML=pic1.innerHTML
    pic.scrollLeft=pic.scrollWidth
    function Marquee(){
    if(pic.scrollLeft<=0)
    pic.scrollLeft+=pic2.offsetWidth
    else{
    pic.scrollLeft--
    }
    }
    var MyMar=setInterval(Marquee,speed)
    pic.onmouseover=function() {clearInterval(MyMar)}
    pic.onmouseout=function({MyMar=setInterval(Marquee,speed)}
</script>

將此段程式碼貼在<body></body>裡面想要呈現的位置即可運行。

歡迎留言交流！