有没有JavaScript图片轮翻的例子

当然有，以下是一个简单的JavaScript图片轮翻的例子：

HTML代码：

<div class="slider">
  <img src="image1.jpg" alt="image1">
  <img src="image2.jpg" alt="image2">
  <img src="image3.jpg" alt="image3">
  <img src="image4.jpg" alt="image4">
</div>

CSS代码：

.slider {
  position: relative;
  width: 100%;
  height: 400px;
  overflow: hidden;
}

.slider img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
}

.slider img.active {
  opacity: 1;
}

JavaScript代码：

var sliderIndex = 0;
var sliderImages = document.querySelectorAll('.slider img');
sliderImages[sliderIndex].classList.add('active');

setInterval(function() {
  sliderImages[sliderIndex].classList.remove('active');
  sliderIndex++;
  if (sliderIndex >= sliderImages.length) {
    sliderIndex = 0;
  }
  sliderImages[sliderIndex].classList.add('active');
}, 3000);

JavaScript代码解释：

首先，我们定义了一个变量`sliderIndex`来跟踪当前显示哪张图片，同时获取所有的`<img>`元素并将第一张设为活动状态。

然后，我们使用`setInterval`函数来定期更改活动图像。在每次迭代中，我们将当前的活动图片隐藏，并增加`sliderIndex`变量。如果`sliderIndex`变量的值超出了图片数量，则将其重置为0。最后，我们将下一张图片设置为活动状态。

最后，我们在CSS中定义了过渡效果，以使更改更加平滑。