使用纯JS自动幻灯片放映

基础概念

纯JavaScript自动幻灯片放映是指使用JavaScript编写脚本来控制网页上的图片或其他内容的自动切换显示。这种技术通常用于创建动态的、无需用户交互即可自动播放的图片展示效果。

类型

基于时间的自动切换：设定一个时间间隔，每隔一段时间自动切换到下一张图片。
基于事件的自动切换：虽然较少见，但也可以通过监听某些事件（如鼠标悬停）来触发自动切换。

应用场景

网站首页轮播图：吸引用户注意力，展示重要信息或产品。
博客文章配图展示：自动播放相关图片，丰富内容呈现。
广告宣传页面：循环播放广告内容，提高曝光率。

示例代码

以下是一个简单的纯JavaScript自动幻灯片放映示例：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Auto Slideshow</title>
<style>
  #slideshow {
    position: relative;
    width: 600px;
    height: 400px;
    overflow: hidden;
  }
  .slide {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 1s ease-in-out;
  }
  .slide.active {
    opacity: 1;
  }
</style>
</head>
<body>

<div id="slideshow">
  <img class="slide active" src="image1.jpg" alt="Image 1">
  <img class="slide" src="image2.jpg" alt="Image 2">
  <img class="slide" src="image3.jpg" alt="Image 3">
</div>

<script>
  const slides = document.querySelectorAll('.slide');
  let currentSlide = 0;

  function showSlide(n) {
    slides.forEach((slide, index) => {
      slide.classList.remove('active');
    });
    slides[n].classList.add('active');
  }

  function nextSlide() {
    currentSlide = (currentSlide + 1) % slides.length;
    showSlide(currentSlide);
  }

  setInterval(nextSlide, 3000); // Change slide every 3 seconds
</script>

</body>
</html>