CSS Div 圖片輪播代碼怎么寫？

CSS Div 圖片輪播是一種常用的網(wǎng)頁***，用于展示多張圖片，下面是一種簡單的實(shí)現(xiàn)方法：

1、HTML 結(jié)構(gòu)

我們需要一個(gè)包含圖片的容器，可以使用 Div 來實(shí)現(xiàn)。

<div id="slider">
    <img src="image1.jpg" alt="Image 1">
    <img src="image2.jpg" alt="Image 2">
    <img src="image3.jpg" alt="Image 3">
    <!-- 更多圖片 -->
</div>

2、CSS 樣式

我們需要給這個(gè)容器添加一些樣式。

#slider {
    position: relative;
    width: 500px;
    height: 300px;
    overflow: hidden;
}
#slider img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

3、JavaScript 代碼

我們需要編寫一些 JavaScript 代碼來實(shí)現(xiàn)圖片的輪播效果。

var slider = document.getElementById('slider');
var images = slider.getElementsByTagName('img');
var index = 0;
var timer = null;
function nextImage() {
    images[index].style.left = '-100%';
    index = (index + 1) % images.length;
    images[index].style.left = '0';
}
timer = setInterval(nextImage, 3000); // 每3秒切換一次圖片

代碼實(shí)現(xiàn)了一個(gè)簡單的圖片輪播效果，每3秒自動(dòng)切換一次圖片，你可以根據(jù)自己的需求進(jìn)行調(diào)整和優(yōu)化。