css制作一个轮播图 |css3 时间线

/* HTML结构 */
<div class="slider">
<img src="1.jpg">
<img src="2.jpg">
<img src="3.jpg">
</div>
/* CSS样式 */
.slider {
position: relative;
width: 500px;
height: 300px;
overflow: hidden;
}
.slider img {
position: absolute;
top: 0;
left: 0;
opacity: 0;
transition: all 0.5s ease-in-out;
}
.slider img:first-of-type {
opacity: 1;
}
.slider img.active {
opacity: 1;
z-index: 1;
}
/* JS代码 */
let index = 0;
let images = document.querySelectorAll('.slider img');
setInterval(function() {
index++;
images.forEach(function(img) {
img.classList.remove('active');
});
if (index == images.length) {
index = 0;
}
images[index].classList.add('active');
}, 2000);

首先，大家需要一个包裹图片的容器，这里用的是一个div元素，并设置了宽度和高度，超出部分隐藏。图片使用了绝对定位，并设置了opacity属性，使其透明度为0，从而第一次只显示第一张图片。

接着，大家为第一张图片设置了一个特殊的类名.active，表示当前显示的图片。

最后，在JavaScript代码中，大家使用了setInterval方法来定时更换图片。每次更换时，都先将所有图片的.active类名移除，并将index加1。如果index到达了最后一张图片，就将其归零。然后，再为当前图片添加.active类名，从而实现轮播效果。