css幻灯片加手动切换 |css3 让一张图片旋转

HTML代码：
<div class="slideshow-container">
<div class="slideshow-slide"><img src="slide1.jpg"></div>
<div class="slideshow-slide"><img src="slide2.jpg"></div>
<div class="slideshow-slide"><img src="slide3.jpg"></div>
<div class="slideshow-slide"><img src="slide4.jpg"></div>
<div class="slideshow-slide"><img src="slide5.jpg"></div>
</div>
<div class="slideshow-dots">
<span class="slideshow-dot"></span>
<span class="slideshow-dot"></span>
<span class="slideshow-dot"></span>
<span class="slideshow-dot"></span>
<span class="slideshow-dot"></span>
</div>
CSS代码：
.slideshow-container {
width: 100%;
position: relative;
}
.slideshow-slide {
position: absolute;
left: 0;
top: 0;
opacity: 0;
transition: opacity 1s ease;
}
.slideshow-slide.active {
opacity: 1;
}
.slideshow-dots {
position: absolute;
bottom: 20px;
left: 0;
width: 100%;
text-align: center;
z-index: 999;
}
.slideshow-dot {
display: inline-block;
width: 16px;
height: 16px;
border-radius: 50%;
background-color: #bbb;
margin: 0 8px;
cursor: pointer;
}
.slideshow-dot.active {
background-color: #fff;
}
JavaScript代码：
const slides = document.querySelectorAll('.slideshow-slide');
const dots = document.querySelectorAll('.slideshow-dot');
let index = 0;
function showSlide(n) {
if (n >= slides.length) {
index = 0;
}
if (nslide.classList.remove('active'));
dots.forEach(dot =>dot.classList.remove('active'));
slides[index].classList.add('active');
dots[index].classList.add('active');
}
dots.forEach((dot, i) =>{
dot.addEventListener('click', () =>{
index = i;
showSlide(index);
})
})
showSlide(index);

上面的代码中，HTML部分包含了一个包裹着幻灯片的容器和一个用于控制切换的圆点导航。CSS部分设置了幻灯片和圆点导航的样式。JavaScript部分实现了手动切换的功能，大家通过给圆点导航添加事件监听，当圆点导航被点击时，就会触发对应的幻灯片显示。

通过以上代码及说明，大家可以实现了一个简单的CSS幻灯片加上手动切换的功能。在实际开发中，大家可以对其中的样式和JavaScript代码进行自定义和改进，以创造更加令人满意的效果。