css实现简单的手动轮播

CSS可以实现简单的手动轮播，具体实现方式如下：

/* HTML结构 */
<div class="slider">
  <img src="image1.jpg">
  <img src="image2.jpg">
  <img src="image3.jpg">
</div>

/* CSS样式 */
.slider {
  position: relative; /* 相对定位，为了使图片可以在其上面定位 */
  width: 500px;
  height: 300px;
  overflow: hidden; /* 溢出部分隐藏，为了使图片不超出容器 */
}
.slider img {
  position: absolute; /* 绝对定位 */
  top: 0;
  left: 0;
  opacity: 0; /* 初始图片不显示 */
  transition: opacity .5s; /* 渐变过渡效果，动画时间为0.5s */
}
.slider img.active {
  opacity: 1; /* 当前图片显示 */
}

/* JS脚本 */
var slider = document.querySelector('.slider');
var images = slider.querySelectorAll('img');
var i = 0;
var len = images.length;
// 初始显示第一张图片
images[0].classList.add('active');
// 点击左箭头
document.querySelector('.prev').addEventListener('click',function() {
  images[i].classList.remove('active'); // 当前图片隐藏
  i = (i + len - 1) % len; // 计算上一张图片的索引
  images[i].classList.add('active'); // 上一张图片显示
});
// 点击右箭头
document.querySelector('.next').addEventListener('click',function() {
  images[i].classList.remove('active'); // 当前图片隐藏
  i = (i + 1) % len; // 计算下一张图片的索引
  images[i].classList.add('active'); // 下一张图片显示
});