jQuery实验定时器三个div之间的自动轮播

你可以使用以下代码来实现三个div之间的自动轮播：

HTML代码：

<div class="slider">
  <div class="slide active">
    <img src="slide1.jpg" alt="Slide 1">
  </div>
  <div class="slide">
    <img src="slide2.jpg" alt="Slide 2">
  </div>
  <div class="slide">
    <img src="slide3.jpg" alt="Slide 3">
  </div>
</div>

CSS代码：

.slider {
  position: relative;
}

.slide {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity 1s ease-in-out;
}

.active {
  opacity: 1;
}

JavaScript代码：

$(document).ready(function() {
  var interval = setInterval(function() {
    var $active = $('.slider .active');
    var $next = $active.next();

    if (!$next.length) {
      $next = $('.slider .slide:first-child');
    }

    $active.removeClass('active');
    $next.addClass('active');
  }, 5000);
});

这段代码会在页面加载完成后启动一个定时器，每隔5秒钟切换到下一个div。其中，`.slider`是包含所有div的父级元素，`.slide`是每个div的类名，`.active`是当前显示的div的类名。CSS代码定义了`.slide`元素的位置和透明度，JavaScript代码则根据定时器切换不同的div，并通过添加和删除`.active`类名来控制显示和隐藏。