用以下代码写一个轮播图<ul> <li><img src="../images/1.jpg" alt=""></li> <li><img src="../images/2.jpg" alt=""></li> <li><img src="../images/3.jpg" alt=""></li> <li><img src="../images/4.jpg" alt=""></li> <li><img src="../images/5.jpg" alt=""></li> <li><img src="../images/6.jpg" alt=""></li> </ul> <span class="prev">&#10094;</span> <span class="next">&#10095;</span> </div> <script src="../jquery-3.7.0.js"></script>

你可以使用以下代码来实现一个基本的轮播图：

<div class="slideshow-container">
  <ul class="slides">
    <li><img src="../images/1.jpg" alt=""></li>
    <li><img src="../images/2.jpg" alt=""></li>
    <li><img src="../images/3.jpg" alt=""></li>
    <li><img src="../images/4.jpg" alt=""></li>
    <li><img src="../images/5.jpg" alt=""></li>
    <li><img src="../images/6.jpg" alt=""></li>
  </ul>
  <span class="prev">&#10094;</span>
  <span class="next">&#10095;</span>
</div>

<script src="../jquery-3.7.0.js"></script>
<script>
  $(document).ready(function() {
    var slideIndex = 1;
    showSlides(slideIndex);

    $(".prev").click(function() {
      showSlides(slideIndex -= 1);
    });

    $(".next").click(function() {
      showSlides(slideIndex += 1);
    });

    function showSlides(n) {
      var i;
      var slides = $(".slides li");
      if (n > slides.length) {
        slideIndex = 1
      }
      if (n < 1) {
        slideIndex = slides.length
      }
      for (i = 0; i < slides.length; i++) {
        slides[i].style.display = "none";
      }
      slides[slideIndex - 1].style.display = "block";
    }
  });
</script>

CSS代码如下：

.slideshow-container {
  position: relative;
  margin: auto;
}

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

.slides li {
  display: none;
}

.prev, .next {
  position: absolute;
  top: 50%;
  width: auto;
  margin-top: -22px;
  padding: 16px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
}

.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

.prev:hover, .next:hover {
  background-color: rgba(0, 0, 0, 0.8);
}

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

这里的核心是使用 JavaScript 来控制轮播图。`showSlides(n)` 函数用于显示当前轮播图，其中参数 `n` 表示轮播图的索引号。通过点击“上一页”和“下一页”按钮，可以切换轮播图。在这个例子中，我们使用了 jQuery 库来简化 JavaScript 代码。