jquery手写广告轮播图，无限循环功能

以下是一个使用jQuery实现的无限循环轮播图的简单示例。这个例子使用了一个简单的setInterval函数来控制轮播的时间间隔，并通过修改CSS类来显示正确的图片。

HTML部分：

<div id="carousel">
  <div class="slide active">
    <img src="image1.jpg" alt="Image 1">
  </div>
  <div class="slide">
    <img src="image2.jpg" alt="Image 2">
  </div>
  <div class="slide">
    <img src="image3.jpg" alt="Image 3">
  </div>
  <!-- 更多图片... -->
</div>

CSS部分：

#carousel {
  position: relative;
  width: 600px; /* 设置轮播图的宽度 */
  height: 300px; /* 设置轮播图的高度 */
  overflow: hidden;
}
.slide {
  position: absolute;
  width: 100%;
  height: 100%;
  display: none; /* 所有幻灯片默认不显示 */
}
.slide.active {
  display: block; /* 当前幻灯片显示 */
}

jQuery部分：

$(document).ready(function() {
  var slides = $('#carousel .slide');
  var currentIndex = 0;
  var interval = 3000; // 轮播间隔时间
 
  function nextSlide() {
    var nextIndex = (currentIndex + 1) % slides.length;
    slides.eq(currentIndex).removeClass('active');
    slides.eq(nextIndex).addClass('active');
    currentIndex = nextIndex;
  }
 
  // 启动定时器
  setInterval(nextSlide, interval);
});

这段代码提供了一个简单的无限循环轮播图的实现，你可以根据自己的需求添加更多的功能，比如自动播放的开始和停止、点击控制的功能等。