隨著互聯網技術的不斷發展，網頁設計與開發也越來越多元化。其中，圖片輪播作為一種常見的設計元素，已經成為了很多網頁設計中的重要部分。在這里，我們將介紹一種使用 CSS 實現的圖片輪播代碼，以方便網頁設計中的使用。 首先，我們需要準備好所需的 HTML 結構，例如：< div class="slider">< img src="img1.jpg" alt="Image 1">< img src="img2.jpg" alt="Image 2">< img src="img3.jpg" alt="Image 3">< /div>接下來，我們需要在 CSS 中定義一些基本樣式。首先，我們需要將容器的寬度設置為所需要的大小，并將樣式設置為 relative，以便對其內部元素進行定位。同時，我們也需要將容器內所有的圖片設置為絕對定位，以實現其在容器中的位置。 /* 設置容器樣式 */ .slider { width: 100%; height: 300px; position: relative; overflow: hidden; } /* 設置內部圖片樣式 */ .slider img { position: absolute; top: 0; left: 0; opacity: 0; transition: opacity 0.5s ease-in-out; } 接下來，我們需要為每個圖片設置其具體的位置。我們可以通過為不同的圖片設置不同的 left 值，將其堆疊在一起，實現圖片輪播的效果。同樣地，我們也需要將第一個圖片的 opacity 設置為 1，以避免輪播一開始時出現空白的情況。 /* 設置圖片位置 */ .slider img:nth-child(1) { left: 0; opacity: 1; } .slider img:nth-child(2) { left: 100%; } .slider img:nth-child(3) { left: 200%; } 最后，我們需要編寫一些 JavaScript 代碼來控制圖片輪播。我們可以使用 setInterval 函數來設置定時器，等待一段時間后再將當前顯示的圖片隱藏，并將下一張圖片顯示出來。我們也可以通過修改每個圖片的 left 值，來實現圖片的移動效果。 /* JavaScript 代碼 */ var i = 1; setInterval(function(){ var current = document.querySelector(".slider img:nth-child(" + i + ")"); var next = document.querySelector(".slider img:nth-child(" + (i + 1) + ")"); current.style.opacity = 0; next.style.opacity = 1; current.style.left = "-100%"; next.style.left = "0"; i++; if (i == 4) { i = 1; } }, 5000); 上述代碼通過將當前顯示的圖片向左移動一倍的寬度，以及將下一張圖片移動到容器的左邊來實現圖片的輪播效果。 綜上所述，我們可以使用上述代碼實現一個簡單的基于 CSS 的圖片輪播。不僅簡單易懂，還可以靈活地根據需求進行擴展和修改。