jquery写一个轮播图

下面是一个简单的基于 jQuery 的轮播图实现：

HTML 结构：

<div class="slider">
  <ul class="slides">
    <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 样式：

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

.slides {
  display: block;
  width: 400%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.slides li {
  display: block;
  float: left;
  width: 25%;
}

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

jQuery 代码：

$(function() {
  // 获取轮播图元素和图片列表
  var $slider = $('.slider');
  var $slides = $slider.find('.slides');
  var $images = $slides.find('img');
  
  // 设置轮播图宽度和图片数量
  var width = $slider.width();
  var count = $images.length;
  $slides.width(width * count);
  
  // 初始化图片位置和计时器
  var current = 0;
  var timer = setInterval(next, 3000);
  
  // 轮播图下一张图片函数
  function next() {
    current = (current + 1) % count;
    $slides.animate({left: -current * width}, 500);
  }
});

注释已经解释了代码的作用，简单来说就是获取轮播图元素和图片列表，设置轮播图宽度和图片数量，初始化图片位置和计时器，以及编写轮播图下一张图片的函数。这个实现可以自动轮播，也可以通过添加左右箭头实现手动切换。