并列jquery焦点图代码

<div class="slider">
  <div class="slide">Slide 1</div>
  <div class="slide">Slide 2</div>
  <div class="slide">Slide 3</div>
  <!-- 更多幻灯片 -->
</div>
<div class="slider-nav">
  <button class="prev">Prev</button>
  <button class="next">Next</button>
</div>

.slider {
  position: relative;
  overflow: hidden;
  width: 100%;
}
.slide {
  display: none;
  width: 100%;
}
.slide:first-child {
  display: block;
}

$(document).ready(function() {
  var currentIndex = 0;
  var slides = $('.slide');
  var slideCount = slides.length;

  function showSlide(index) {
    slides.hide();
    slides.eq(index).show();
  }

  $('.next').click(function() {
    currentIndex = (currentIndex + 1) % slideCount;
    showSlide(currentIndex);
  });

  $('.prev').click(function() {
    currentIndex = (currentIndex - 1 + slideCount) % slideCount;
    showSlide(currentIndex);
  });
});

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

$(document).ready(function() {
  var currentIndex = 0;
  var slides = $('.slide');
  var slideCount = slides.length;

  function showSlide(index) {
    slides.removeClass('active');
    slides.eq(index).addClass('active');
  }

  $('.next').click(function() {
    currentIndex = (currentIndex + 1) % slideCount;
    showSlide(currentIndex);
  });

  $('.prev').click(function() {
    currentIndex = (currentIndex - 1 + slideCount) % slideCount;
    showSlide(currentIndex);
  });

  // 初始化显示第一张幻灯片
  showSlide(currentIndex);
});