jQuery 實現帶背景色切換的圖片輪播

需求

類似天貓首頁：全屏寬背景色塊 + 固定寬度居中圖片，自動輪播、鼠標懸停暫停、左右箭頭/圓點切換。

核心結構

<div id="wrap">
  <a id="prev">‹</a>
  <a id="next">›</a>
  <ul id="list">
    <li><img src="1.jpg"><div class="bg" style="background:#color1"></div></li>
    <li><img src="2.jpg"><div class="bg" style="background:#color2"></div></li>
  </ul>
  <div id="buttons"><span index="1">●</span><span index="2">●</span></div>
</div>

關鍵 CSS

#wrap { position:relative; width:100%; height:400px; overflow:hidden; }
#list { position:absolute; left:0; top:0; width:9999px; }
#list li { float:left; width:100%; position:relative; }
#list li img { display:block; margin:0 auto; } /* 居中固定寬度圖片 */
#list li .bg { position:absolute; left:0; top:0; width:100%; height:100%; z-index:-1; }
#prev, #next { position:absolute; top:50%; display:none; }
#buttons { position:absolute; bottom:20px; left:50%; transform:translateX(-50%); }
#buttons span { cursor:pointer; } #buttons span.light { color:red; }

核心 JS 邏輯

1. 記錄當前索引 index、動畫狀態 switching。
2. switchPic(offset)：計算目標 left，分幀動畫（setTimeout 遞歸）平滑滑動 #list。
3. 循環邏輯：滑動超出邊界時瞬間跳回另一端（無縫循環）。
4. lightDot() 更新圓點高亮。
5. 自動播放 setInterval，鼠標進出控制暫停/恢復。
6. 事件綁定：箭頭、圓點點擊觸發切換。

完整代碼參考

原回答提供了完整的 window.onload 實現，可直接複製調試，修改圖片數組、時間間隔、寬度常數即可適配項目。