css图片轮播显示 |css怎么添加背景视频教程

HTML结构如下：
<div class="slider">
<img src="img1.jpg">
<img src="img2.jpg">
<img src="img3.jpg">
</div>
CSS样式如下：
.slider {
overflow: hidden;
position: relative;
width: 600px;
height: 400px;
}
.slider img {
position: absolute;
top: 0;
left: 0;
opacity: 0;
transition: all .5s ease-in-out;
}
.slider img:first-child {
opacity: 1;
}

代码中，大家首先给图片轮播的容器设置了一个宽度和高度，以及overflow:hidden来隐藏超出容器的图片。然后大家给图片设置了绝对定位，并设置了opacity为0，这样大家就看不到图片了。接下来大家设置了图片的过渡效果，all表示对所有属性进行过渡，.5s表示过渡时间为0.5秒，ease-in-out表示动画效果为先慢后快再慢。大家给第一张图片设置了opacity:1，这样就可以看到第一张图片了。

接下来大家需要实现图片的切换效果。大家可以通过定时器来实现。代码如下：

//JS代码
var index = 1; //用来表示当前显示的图片
setInterval(function() {
if(index < 3) {
index++;
} else {
index = 1;
}
document.querySelector(".slider").style.transform = "translateX(-" + (index-1)*600 + "px)";
}, 3000);

代码中，大家首先设置了一个index变量，用来表示当前显示的图片。然后大家通过setInterval函数每3秒钟就执行一次函数。每次函数执行时，大家将index加1，这样就可以显示下一张图片。当index等于3的时候，说明已经显示了所有图片，这时大家将index重置为1。最后大家使用translateX对图片轮播容器进行水平移动，从而展示不同图片。这里的600是图片容器的宽度，再乘上(index-1)，就是当前要显示图片的左边距，再加上”px”，就是完整的transform属性的值了。

这样，大家就完成了图片轮播的实现。