自动幻灯片播放（JavaScript）

自动幻灯片播放是一种通过 JavaScript 来实现的功能，允许网页上的图片自动播放。

步骤

1. 在 HTML 代码中创建一个包含幻灯片图片的元素。例：

   <div class="slideshow">
     <img src="image1.jpg" />
     <img src="image2.jpg" />
     <img src="image3.jpg" />
   </div>
   

2. 使用 CSS 设置幻灯片元素的大小和样式。例：

   .slideshow {
     width: 500px;
     height: 300px;
     overflow: hidden;
   }
   
   .slideshow img {
     width: 100%;
     height: 100%;
   }
   

3. 使用 JavaScript 编写一个函数，该函数将自动循环播放幻灯片。例：

   function autoslide() {
     var slides = document.querySelectorAll('.slideshow img');
     var currentSlide = 0;
     var slideInterval = setInterval(nextSlide, 3000);
   
     function nextSlide() {
       slides[currentSlide].classList.remove('active');
       currentSlide = (currentSlide + 1) % slides.length;
       slides[currentSlide].classList.add('active');
     }
   }
   

4. 在 window.onload 事件中调用该函数以启动幻灯片播放。例：

   window.onload = function() {
     autoslide();
   }
   

代码

HTML 代码：

<div class="slideshow">
  <img src="image1.jpg" />
  <img src="image2.jpg" />
  <img src="image3.jpg" />
</div>

CSS 代码：

.slideshow {
  width: 500px;
  height: 300px;
  overflow: hidden;
}

.slideshow img {
  width: 100%;
  height: 100%;
}

JavaScript 代码：

function autoslide() {
  var slides = document.querySelectorAll('.slideshow img');
  var currentSlide = 0;
  var slideInterval = setInterval(nextSlide, 3000);

  function nextSlide() {
    slides[currentSlide].classList.remove('active');
    currentSlide = (currentSlide + 1) % slides.length;
    slides[currentSlide].classList.add('active');
  }
}

window.onload = function() {
  autoslide();
}