jquery轮播图实现简单代码

以下是一个简单的jQuery轮播图的实现代码：

HTML代码：

<div class="slideshow">
  <ul>
    <li><img src="image1.jpg" alt=""></li>
    <li><img src="image2.jpg" alt=""></li>
    <li><img src="image3.jpg" alt=""></li>
    <li><img src="image4.jpg" alt=""></li>
  </ul>
</div>

CSS代码：

.slideshow {
  position: relative;
  width: 100%;
  height: 300px;
  overflow: hidden;
}

.slideshow ul {
  position: absolute;
  width: 400%;
  height: 100%;
  left: 0;
  margin: 0;
  padding: 0;
}

.slideshow li {
  float: left;
  width: 25%;
  height: 100%;
  list-style: none;
}

.slideshow img {
  width: 100%;
  height: 100%;
  display: block;
}

JavaScript代码：

$(document).ready(function() {
  var slideIndex = 0;
  showSlides();

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