JavaScript 實現按鈕切換背景圖片：修改 DOM 樣式或圖片 src 屬性

需求

點擊不同按鈕，切換頁面背景圖片。

方案一：修改容器 backgroundImage（推薦）

<div id="bgContainer" style="width:100%;height:100vh;background-size:cover;"></div>
<button onclick="changeBg('img1.jpg')">圖1</button>
<button onclick="changeBg('img2.jpg')">圖2</button>

<script>
function changeBg(url) {
    document.getElementById('bgContainer').style.backgroundImage = 'url(' + url + ')';
}
</script>

方案二：切換 <img> 標簽 src

<img id="bgImg" src="default.jpg" style="position:fixed;top:0;left:0;width:100%;height:100%;z-index:-1;">
<button onclick="document.getElementById('bgImg').src='img1.jpg'">圖1</button>

方案三：CSS 類切換（性能最佳）

.bg1 { background-image: url(img1.jpg); }
.bg2 { background-image: url(img2.jpg); }

<script>
function changeBg(className) {
    document.body.className = className; // 或容器元素
}
</script>

優化建議

• 預加載圖片：new Image().src = 'img1.jpg'; 避免切換時白屏。
• 使用 background-size: cover; background-position: center; 自適應容器。
• 若為輪播圖，考慮成熟庫（Swiper、Slick）處理動畫、觸摸、無限循環。