JavaScript 實作無縫循環跑馬燈/滾動欄效果

網頁常見的橫向跑馬燈、圖片輪播、公告滾動，核心邏輯是「複製首尾節點、位移超出範圍時瞬間重置」。本文提供原生 JS 完整實作，無需 jQuery，輕量高效。

HTML 結構

<div id="body">
  <div id="leftDiv"><button><img src="image/left.PNG"/></button></div>
  <div id="div1">
    <ul>
      <li><img src="image/1.JPG"/></li>
      <li><img src="image/2.JPG"/></li>
      <li><img src="image/3.JPG"/></li>
      <li><img src="image/4.JPG"/></li>
    </ul>
  </div>
  <div id="rightDiv"><button><img src="image/right.PNG"/></button></div>
</div>

CSS 關鍵點

#div1 {
    width: 748px;       /* 可視區寬度 = 單項寬度 × 顯示個數 */
    height: 125px;
    overflow: hidden;   /* 隱藏超出部分 */
    position: relative;
}
#div1 ul {
    position: absolute;
    left: 0; top: 0;
    /* JS 會動態設定 width = 項目數 × 單項寬度 */
}
#div1 ul li {
    float: left;
    width: 187px;       /* 單項固定寬度 */
    height: 125px;
    list-style: none;
}

JavaScript 核心邏輯

window.onload = function() {
    var oDiv = document.getElementById('div1');
    var oUl = oDiv.getElementsByTagName('ul')[0];
    var oLi = oUl.getElementsByTagName('li');
    var oLeft = document.getElementById('leftDiv');
    var oRight = document.getElementById('rightDiv');

    // 1. 複製內容，實現無縫循環
    oUl.innerHTML += oUl.innerHTML;
    // 2. 設定 ul 總寬度
    oUl.style.width = oLi[0].offsetWidth * oLi.length + 'px';

    var speed = -2; // 負值向左，正值向右
    var timer;

    function move() {
        // 向左滾動：超過一半寬度瞬間回 0
        if (oUl.offsetLeft < -oUl.offsetWidth / 2) {
            oUl.style.left = '0';
        }
        // 向右滾動：超過 0 瞬間回 -一半寬度
        else if (oUl.offsetLeft > 0) {
            oUl.style.left = -oUl.offsetWidth / 2 + 'px';
        }
        oUl.style.left = oUl.offsetLeft + speed + 'px';
    }

    // 3. 自動播放
    timer = setInterval(move, 30);

    // 4. 左右按鈕控制方向
    oLeft.onclick = function() { speed = -2; };
    oRight.onclick = function() { speed = 2; };

    // 5. 滑鼠懸停暫停
    oUl.onmouseover = function() { clearInterval(timer); };
    oUl.onmouseout = function() { timer = setInterval(move, 30); };
};

核心原理解析

1. 複製節點：oUl.innerHTML += oUl.innerHTML 使列表變成 [A,B,C,D,A,B,C,D]，寬度加倍。
2. 無縫跳轉：當向左滾動超過原始長度一半（即進入複製區），瞬間將 left 重置為 0，畫面無感知；向右同理。
3. 速度控制：speed 變數正負控制方向，按鈕切換即可。
4. 效能：操作 style.left 觸發重排，現代瀏覽器足以應付；大量項目建議改用 transform: translateX() + requestAnimationFrame。

進階擴充建議

• 觸控支援：監聽 touchstart/move/end 實現手機滑動切換。
• 指示器/分頁：根據 offsetLeft 計算當前索引，高亮對應圓點。
• 響應式：resize 事件重新計算單項寬度與可視個數。
• 無障礙：加入 aria-live="polite"、鍵盤焦點控制。

此原生 JS 實作無依賴、體積極小，適合嵌入式裝置、AMP 頁面或追求極致效能的專案。