如何让jQuery轮播图的索引按钮点击后同步切换对应图片？

问题说明 #

点击索引按钮（bullet）时，无法同步切换到对应索引的图片，需实现点击第N个按钮就显示第N张图片的功能。

解决步骤 #

1. 为所有.bullet元素绑定点击事件监听
2. 在点击事件中，通过$(this).index()获取当前按钮的索引值
3. 清除自动轮播定时器，避免手动切换与自动轮播冲突
4. 隐藏当前显示的图片，移除当前按钮的active类
5. 将currentSlide和currentBullet更新为点击的索引值
6. 显示对应索引的图片，为对应按钮添加active类
7. 若设置了自动轮播，重新启动定时器

修改后的完整代码 #

JavaScript 代码 #

(function($) {
  $.fn.imageSlider = function(options) {
    let settings = $.extend({
      interval: 2000,
      slide: 'auto'
    }, options);

    let intervals;
    if (settings.slide === 'auto') {
      intervals = window.setInterval(nextImg, settings.interval)
    }

    let currentSlide = 0;
    let currentBullet = 0;
    // 初始化状态
    $('img').hide();
    $('img').eq(currentSlide).show();
    $('.bullet').eq(currentBullet).addClass('active')

    // 切换到下一张图片
    function nextImg() {
      $('.bullet').removeClass('active')
      $('img').eq(currentSlide).hide().removeClass('active');
      $('.bullet').eq(currentBullet).removeClass('active')

      currentSlide = (currentSlide + 1) % $('img').length;
      currentBullet = (currentBullet + 1) % $('.bullet').length;

      $('img').eq(currentSlide).fadeIn().addClass('active')
      $('.bullet').eq(currentBullet).addClass('active')
    }

    // 切换到上一张图片
    function prevImg() {
      $('.bullet').removeClass('active')
      $('img').eq(currentSlide).hide().removeClass('active');
      $('.bullet').eq(currentBullet).removeClass('active')

      // 修复负索引计算问题
      currentSlide = (currentSlide - 1 + $('img').length) % $('img').length;
      currentBullet = (currentBullet - 1 + $('.bullet').length) % $('.bullet').length;

      $('img').eq(currentSlide).fadeIn().addClass('active')
      $('.bullet').eq(currentBullet).addClass('active');
    }

    // 点击索引按钮切换图片
    $('.bullet').on('click', function() {
      const targetIndex = $(this).index();
      window.clearInterval(intervals);

      // 隐藏当前内容
      $('img').eq(currentSlide).hide().removeClass('active');
      $('.bullet').eq(currentBullet).removeClass('active');

      // 更新当前索引
      currentSlide = targetIndex;
      currentBullet = targetIndex;

      // 显示目标内容
      $('img').eq(currentSlide).fadeIn().addClass('active');
      $('.bullet').eq(currentBullet).addClass('active');

      // 重启自动轮播（若开启）
      if (settings.slide === 'auto') {
        intervals = window.setInterval(nextImg, settings.interval);
      }
    });

    $('.right-button').on('click', function() {
      nextImg()
      window.clearInterval(intervals)
      if (settings.slide === 'auto') {
        intervals = window.setInterval(nextImg, settings.interval)
      }
    })

    $('.left-button').on('click', function() {
      prevImg()
      window.clearInterval(intervals)
      if (settings.slide === 'auto') {
        intervals = window.setInterval(nextImg, settings.interval)
      }
    });
  }
})(jQuery);

$('.container').imageSlider({
  interval: 2000,
  slide: 'stop'
})

CSS 代码 #

.parent-container {
     background-color: bisque;
     position: relative;
     z-index: 100;
     overflow: hidden;
     display: block;
     margin: 0 auto;
     width: 600px;
     height: 100%;
     align-items: center;
     display: flex;
}
 .parent-container .left-button {
     left: 0;
     cursor: pointer;
     width: 30px;
     background-color: yellow;
     height: 30px;
     position: absolute;
     z-index: 39;
}
 .parent-container .right-button {
     right: 0;
     cursor: pointer;
     width: 30px;
     background-color: yellow;
     height: 30px;
     position: absolute;
     z-index: 39;
}
 .parent-container .container {
     justify-content: center;
     align-items: center;
     margin: 0 auto;
     background-color: darkolivegreen;
     height: 500px;
     display: flex;
     position: relative;
}
 .parent-container .container .active {
     margin: 0 auto;
     position: relative;
     width: 300px;
     height: 300px;
     background-color: darkred;
     align-items: center;
}
 .bullets {
     width: 400px;
     margin: 0 auto;
     text-align: center;
     position: relative;
     bottom: 30px;
     z-index: 300;
}
 .bullets .bullet {
     background-color: red;
     display: inline-block;
     width: 10px;
     height: 10px;
     border-radius: 5px;
     background: #ccc;
     margin: 0 5px;
     cursor: pointer;
}
 .bullets .active {
     background: #333;
}

HTML 代码 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<main>
  <div class="parent-container">
    <div class="left-button"></div>
    <div class="right-button"></div>

    <div class="container">
      <img src="https://picsum.photos/id/237/200/300" class="active">
      <img src="https://picsum.photos/seed/picsum/200/300" class="">
      <img src="https://picsum.photos/200/300?grayscale" class="">
      <img src="https://picsum.photos/200/300/?blur" class="">

    </div>
  </div>
  <div class="bullets">
    <div class="bullet active"></div>
    <div class="bullet"></div>
    <div class="bullet"></div>
    <div class="bullet"></div>
  </div>
</main>

额外优化说明 #

• 修复了prevImg函数中负索引的计算问题，避免出现无效索引
• 声明了intervals变量，避免全局变量污染

内容的提问来源于stack exchange，提问作者saintzack92