JavaScript 圖片輪播：滑鼠切換大圖與縮圖邊框同步問題

問題現象

頁面上方顯示大圖，下方有數字按鈕與縮圖。滑鼠移入數字或縮圖時切換大圖並高亮對應項。但使用兩個獨立函數 showA、showB 分別處理，導致狀態不同步：滑鼠從數字移到縮圖時，兩邊高亮同時存在，未清除上一狀態。

解決思路

合併為單一函數 show(idx)，內部統一管理「目前顯示索引」now。每次呼叫先重置舊項樣式，再套用新項樣式，確保同一時刻僅有一組高亮。

優化後代碼

<script>
var now = 1;
var tup = [ /* 圖片 URL 陣列 */ ];

function show(idx) {
    if (idx === now) return;
    // 清除舊狀態
    var oldBtn = document.getElementById('dianji' + now);
    var oldImg = document.getElementById('pic' + now);
    oldBtn.style.backgroundColor = '#f60';
    oldBtn.style.color = 'black';
    oldImg.style.border = 'none';

    // 套用新狀態
    var newBtn = document.getElementById('dianji' + idx);
    var newImg = document.getElementById('pic' + idx);
    newBtn.style.backgroundColor = 'black';
    newBtn.style.color = 'white';
    newImg.style.border = '3px #f60 solid';

    document.getElementById('tp').src = tup[idx - 1];
    now = idx;
}

// 初始化
show(1);
</script>

HTML 綁定調整

數字按鈕與縮圖均綁定 onmousemove="show(索引)"，移除 onmouseout 即可。