轮播图html，css，js代码

创建一个简单的轮播图，你可以使用HTML结构、CSS样式和基础的JavaScript。以下是基本的代码示例：

**HTML:**

<div id="slider">
  <div class="slide active">
    <img src="image1.jpg" alt="Slide 1">
  </div>
  <div class="slide">
    <img src="image2.jpg" alt="Slide 2">
  </div>
  <!-- 更多图片... -->
  <a class="prev"></a> <!-- 上一张箭头 -->
  <a class="next"></a> <!-- 下一张箭头 -->
</div>

**CSS:**

#slider {
  width: 100%;
  position: relative;
}

.slide {
  display: none; /* 隐藏所有除了第一个 */
  position: absolute;
  top: 0;
  left: 0;
}

.slide.active {
  display: block; /* 显示当前的图片 */
}

.prev, .next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

**JavaScript (基本版，无库):**

var slides = document.querySelectorAll('.slide');
var currentSlide = 0;

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

// 初始加载
slideShow();

// 箭头点击事件
document.querySelector('.prev').addEventListener('click', function() {
  slideShow();
});

document.querySelector('.next').addEventListener('click', function() {
  slideShow();
});

这个例子只是一个基础的轮播图，实际应用中你可能需要引入更专业的轮播库，比如Swiper或Slick，它们提供了更多的功能和更好的兼容性。