使用jquery的siblings函数完成图片轮播

好的，我来给您提供一个使用 jQuery 的 siblings 函数完成图片轮播的示例代码：

HTML 代码：

<div class="slider">
  <img src="img1.jpg" alt="图片1">
  <img src="img2.jpg" alt="图片2">
  <img src="img3.jpg" alt="图片3">
</div>

CSS 代码：

.slider {
  position: relative;
  width: 800px;
  height: 400px;
  overflow: hidden;
}
.slider img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  z-index: 1;
}
.slider img.active {
  opacity: 1;
  z-index: 2;
}

JavaScript 代码：

$(function() {
  // 获取图片元素和计数器
  const $imgs = $('.slider img');
  let count = 0;

  // 定义轮播函数
  function slide() {
    // 获取当前图片和下一张图片
    const $currentImg = $imgs.eq(count);
    const $nextImg = $currentImg.siblings('img').eq(count);

    // 切换图片
    $currentImg.removeClass('active');
    $nextImg.addClass('active');

    // 更新计数器
    count = (count + 1) % $imgs.length;
  }

  // 设置定时器
  setInterval(slide, 3000);
});

代码中，我们首先使用 jQuery 的 `$` 函数获取图片元素和计数器。接着，我们定义了轮播函数 `slide`，其中使用了 jQuery 的 `siblings` 函数获取下一张图片。在轮播函数中，我们将当前图片的 `active` 类移除，同时将下一张图片的 `active` 类添加上，从而实现了图片的切换。最后，我们使用 `setInterval` 函数设置了一个定时器，每隔3秒调用一次轮播函数。

希望对您有所帮助！