制作原生JavaScript图片轮播

制作原生JavaScript图片轮播通常涉及创建一个包含图片集合的容器，以及控制图像显示顺序的功能。以下是一个简单的步骤概述：

1. **HTML结构**:
创建一个包含图片的容器，比如`<div>`元素，并设置初始显示的第一张图片作为`active`状态：

   <div id="slider">
     <img src="image1.jpg" class="slide active">
     <img src="image2.jpg" class="slide">
     <!-- 添加更多图片 -->
   </div>

2. **CSS样式**:
定义轮播容器和图片的基本样式，隐藏除当前显示图片外的其他图片：

   #slider {
     position: relative;
     width: 100%;
     overflow: hidden;
   }
   .slide {
     display: none;
   }
   .slide.active {
     display: block;
   }

3. **JavaScript代码**:
- 获取图片容器和图片元素
- 设置初始索引和计数器
- 定义轮播函数

   const slider = document.getElementById('slider');
   const slides = slider.querySelectorAll('.slide');

   let currentIndex = 0;

   function showSlide(index) {
     for (let i = 0; i < slides.length; i++) {
       slides[i].classList.remove('active');
     }
     slides[index].classList.add('active');
     currentIndex = index;
   }

   // 轮播效果，可以设定自动切换间隔
   setInterval(() => {
     currentIndex = (currentIndex + 1) % slides.length;
     showSlide(currentIndex);
   }, 3000); // 每隔3秒切换一次

   // 初始化显示第一张图片
   showSlide(0);