切换下标识滑动效果

要切换下标识滑动效果，您可以使用jQuery或JavaScript。以下是一个简单的jQuery示例：

HTML:

<div class="slider">
  <div class="slide"></div>
  <div class="slide"></div>
  <div class="slide"></div>
</div>
<div class="slider-dots">
  <div class="slider-dot active"></div>
  <div class="slider-dot"></div>
  <div class="slider-dot"></div>
</div>

CSS:

.slider {
  width: 100%;
  height: 300px;
  position: relative;
}

.slide {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  display: none;
}

.slide:first-child {
  display: block;
}

.slider-dots {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

.slider-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: gray;
  margin: 0 5px;
  cursor: pointer;
}

.slider-dot.active {
  background-color: black;
}

jQuery:

$(document).ready(function() {
  var currentIndex = 0;
  var slides = $('.slide');
  var dots = $('.slider-dot');

  function showSlide(index) {
    slides.hide();
    $(slides[index]).show();
  }

  dots.on('click', function() {
    var dotIndex = dots.index(this);
    if (dotIndex !== currentIndex) {
      dots.removeClass('active');
      $(this).addClass('active');
      showSlide(dotIndex);
      currentIndex = dotIndex;
    }
  });
});

在这个示例中，我们创建了一个包含幻灯片和下标识的HTML结构。每当单击下标识时，我们检查当前下标识的索引是否与当前幻灯片的索引不同。如果是，我们会将当前下标识的类“active”添加到该元素上，并将所有其他下标识的“active”类删除。然后我们将显示相应的幻灯片，并将其索引保存到“currentIndex”变量中。