css3炫酷的幻灯片 |css的并集选择器

.slider {
position: relative;
width: 100%;
height: 500px;
overflow: hidden;
}
.slide {
position: absolute;
top: 0;
left:0;
width: 100%;
height: 100%;
opacity: 0;
transition: opacity 1s ease-in-out;
}
.slide.active {
opacity: 1;
}
.slide img{
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
.btn {
position: absolute;
top: 50%;
transform: translateY(-50%);
height: 50px;
width: 50px;
background-color: #fff;
border: 2px solid #000;
border-radius: 50%;
cursor: pointer;
transition: all 0.2s ease-in-out;
}
.btn:hover {
background-color: #000;
color: #fff;
}
.btn.prev {
left: 10px;
}
.btn.next {
right: 10px;
}

以上是大家幻灯片的CSS样式，大家使用了绝对定位，opacity属性和transition属性来实现图片的自动过渡效果。使用object-fit和object-position属性来保证图片的显示。除此之外，大家还加入了两个按钮用来切换图片。

接下来大家要处理JS交互的部分：

let slides = document.querySelectorAll('.slide');
let activeSlide = 0;
function setActiveSlide(index) {
slides[activeSlide].classList.remove('active');
activeSlide = index;
slides[activeSlide].classList.add('active');
}
let buttonNext = document.querySelector('.btn.next');
let buttonPrev = document.querySelector('.btn.prev');
buttonNext.addEventListener('click', function() {
let newSlide = activeSlide + 1;
if (newSlide >= slides.length) {
newSlide = 0;
}
setActiveSlide(newSlide);
});
buttonPrev.addEventListener('click', function() {
let newSlide = activeSlide - 1;
if (newSlide< 0) {
newSlide = slides.length - 1;
}
setActiveSlide(newSlide);
});
setActiveSlide(0);

上面的JS代码使大家的按钮可以进行图片的前后切换。同时大家也初始化了幻灯片，将第一张图片设置为了活动状态。

到这里，大家的幻灯片就完成了，是不是很简单呢？只需要使用CSS3和JS就能实现一个炫酷的幻灯片。大家可以根据需要修改它的样式和属性，个性化的幻灯片等待着你的创造。