jquery轮播图

jQuery轮播图可以通过使用jQuery插件来实现。以下是一个简单的例子：

HTML代码：

<div class="slider">
  <ul class="slides">
    <li><img src="image1.jpg"></li>
    <li><img src="image2.jpg"></li>
    <li><img src="image3.jpg"></li>
  </ul>
</div>

CSS代码：

.slider {
  position: relative;
  width: 100%;
  height: 400px;
}
.slides {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  list-style: none;
}
.slides li {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  z-index: 1;
  transition: opacity 1s;
}
.slides li.active {
  opacity: 1;
  z-index: 2;
}

JavaScript代码：

$(document).ready(function(){
  // 初始化
  var currentSlide = 0;
  var slides = $('.slides li');
  var slideInterval = setInterval(nextSlide,2000);
  
  function nextSlide() {
      // 切换到下一张图片
      slides.eq(currentSlide).removeClass('active');
      currentSlide = (currentSlide + 1) % slides.length;
      slides.eq(currentSlide).addClass('active');
  }
});

在这个例子中，轮播图的HTML结构使用了一个`<div>`元素作为容器，包含了一个`<ul>`元素和若干个`<li>`元素，每个`<li>`元素包含一张图片。CSS样式中设置了容器的宽度、高度，以及图片的初始透明度和层级。JavaScript代码则实现了切换图片的逻辑，通过`setInterval()`函数定时调用`nextSlide()`函数来切换图片。