JavaScript轮播图代码左右切换详解

轮播图是一种常见的网页设计元素，它能够展示一系列的图片，并通过切换图片的方式实现动态效果，在JavaScript中，我们可以使用简单的代码实现轮播图的左右切换，下面是一个简单的示例代码，可以帮助你快速上手。

HTML代码：

<div class="slider">
  <div class="slide-track">
    <div class="slide">
      <img src="image1.jpg" alt="Image 1">
    </div>
    <div class="slide">
      <img src="image2.jpg" alt="Image 2">
    </div>
    <div class="slide">
      <img src="image3.jpg" alt="Image 3">
    </div>
  </div>
</div>

CSS代码：

.slider {
  width: 500px;
  height: 300px;
  overflow: hidden;
}
.slide-track {
  width: calc(33.33% - 50px);
  display: flex;
  animation: scroll 10s linear infinite;
}
.slide {
  width: 100%;
  height: 100%;
}

JavaScript代码：

var slides = document.querySelectorAll('.slide');
var currentSlide = 0;
var slideInterval = setInterval(nextSlide, 3000); // 切换时间间隔为3秒
function nextSlide() {
  slides[currentSlide].style.transform = 'translateX(-33.33%)'; // 左右切换效果
  currentSlide = (currentSlide + 1) % slides.length; // 循环切换到最后一张图片，实现无限循环效果
}