banner切换jquery代码

<div class="banner">
  <ul class="banner-list">
    <li class="active">图片 1</li>
    <li>图片 2</li>
    <li>图片 3</li>
  </ul>
  <div class="banner-controls">
    <button class="prev">上一张</button>
    <button class="next">下一张</button>
  </div>
</div>

.banner-list li {
  display: none;
}
.banner-list li.active {
  display: block;
}

$(document).ready(function() {
  var currentIndex = 0;
  var bannerItems = $('.banner-list li');
  var totalItems = bannerItems.length;

  function showImage(index) {
    bannerItems.removeClass('active');
    bannerItems.eq(index).addClass('active');
  }

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

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