用javascript轮播图

下面是一个基本的javascript轮播图示例：

HTML：

<div class="slider">
  <ul class="slides">
    <li><img src="img/slide1.jpg"></li>
    <li><img src="img/slide2.jpg"></li>
    <li><img src="img/slide3.jpg"></li>
  </ul>
</div>

CSS：

.slider {
  position: relative;
  overflow: hidden;
}

.slides {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
}

.slides li {
  flex-shrink: 0;
}

.slides img {
  width: 100%;
  height: auto;
}

JavaScript：

var slideIndex = 0;
showSlides();

function showSlides() {
  var i;
  var slides = document.getElementsByClassName("slides")[0].getElementsByTagName("li");
  for (i = 0; i < slides.length; i++) {
    slides[i].style.display = "none";  
  }
  slideIndex++;
  if (slideIndex > slides.length) {slideIndex = 1}    
  slides[slideIndex-1].style.display = "block";  
  setTimeout(showSlides, 3000); // 切换时间为3秒
}

上面的代码利用了setTimeout函数，每隔3秒切换到下一张图片。可以根据需要调整切换时间和其他样式。