css幻灯片点一下就下一张图片

CSS幻灯片点一下就下一张图片是一种很常见的网页设计技巧，让用户可以轻松地浏览多张图片或幻灯片展示。

div class="slideshow">
      img src="img1.jpg" alt="Slide 1">
      img src="img2.jpg" alt="Slide 2">
      img src="img3.jpg" alt="Slide 3">
      img src="img4.jpg" alt="Slide 4">
      img src="img5.jpg" alt="Slide 5">
    /div>
    script>
      const slideshow = document.querySelector('.slideshow');
      const slides = slideshow.querySelectorAll('img');
      let currentSlide = 0;
      setInterval(nextSlide, 5000);
 // 自动切换  function nextSlide() {
        slides[currentSlide].classList.remove('active');
        currentSlide = (currentSlide + 1) % slides.length;
        slides[currentSlide].classList.add('active');
  }
      slides[currentSlide].classList.add('active');
     // 第一张显示  for (let i = 0;
     i  slides.length;
 i++) {
    slides[i].addEventListener('click', function() {
     // 点击切换      slides[currentSlide].classList.remove('active');
          currentSlide = i;
          slides[currentSlide].classList.add('active');
    }
    );
  }
    /script>
    

代码中的div包含多张图片，通过JavaScript来切换图片。通过添加active类来实现当前显示的图片。定时器实现自动轮播，点击事件实现手动切换。

使用CSS和JavaScript可以轻松实现网页中的幻灯片展示效果，让用户更好地浏览网站内容。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！