写一个用JavaScript实现五张图片的动态轮播效果模板

好的，以下是一个用JavaScript实现五张图片的动态轮播效果模板：

HTML结构：

<div class="slideshow-container">
  <div class="slideshow-slide">
    <img src="img1.jpg">
  </div>
  <div class="slideshow-slide">
    <img src="img2.jpg">
  </div>
  <div class="slideshow-slide">
    <img src="img3.jpg">
  </div>
  <div class="slideshow-slide">
    <img src="img4.jpg">
  </div>
  <div class="slideshow-slide">
    <img src="img5.jpg">
  </div>
</div>

CSS样式：

.slideshow-container {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.slideshow-slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 1s ease-in-out;
}

.slideshow-slide.active {
  opacity: 1;
}

JavaScript代码：

var slides = document.querySelectorAll('.slideshow-slide');
var currentSlide = 0;
var slideInterval = setInterval(nextSlide, 5000);

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

解释：

首先，我们使用`querySelectorAll()`方法获取到所有的轮播图片，并将它们存储在变量`slides`中。

然后，我们定义了一个变量`currentSlide`来存储当前显示的图片，以及一个名为`slideInterval`的定时器，用于每隔5秒钟切换到下一张图片。

接下来，我们定义了一个名为`nextSlide()`的函数，用于切换到下一张图片。在这个函数中，我们首先将当前显示的图片的`active`类删除，然后通过取模运算计算出下一张图片的索引，并将其添加`active`类以显示出来。

最后，我们在页面加载完成后调用`nextSlide()`函数以显示第一张图片，并开始自动轮播。