html简易js轮播图代码

以下是一个简易的 HTML 和 JavaScript 轮播图的代码：

HTML 代码：

<div class="slideshow-container">
  <img class="slide" src="img1.jpg">
  <img class="slide" src="img2.jpg">
  <img class="slide" src="img3.jpg">
  <div class="prev" onclick="prevSlide()">&#10094;</div>
  <div class="next" onclick="nextSlide()">&#10095;</div>
</div>

CSS 代码：

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

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

.slide.active {
  opacity: 1;
}

.prev, .next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 2em;
  cursor: pointer;
}

.prev {
  left: 0;
}

.next {
  right: 0;
}

JavaScript 代码：

var slides = document.querySelectorAll('.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');
}

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

该代码实现了一个简单的轮播图，其中包含三张图片。在 CSS 中，`.slideshow-container` 是容器元素，`.slide` 是轮播图中的每个单独的幻灯片，`.prev` 和 `.next` 是控制幻灯片向前和向后移动的箭头。在 JavaScript 中，`slides` 变量是所有幻灯片的数组，`currentSlide` 变量跟踪当前正在显示的幻灯片，`slideInterval` 变量是每个幻灯片之间的时间间隔。`nextSlide` 和 `prevSlide` 函数分别根据当前幻灯片的索引值来设置下一个或上一个幻灯片的索引值，然后将 `active` 类添加到新幻灯片中，以实现幻灯片之间的淡入淡出效果。