如何在jQuery轮播切换时高亮对应图片ID的控制按钮？

现有代码调整与补充 #

控制按钮生成（新增图片属性绑定） #

$('.cycler').each(function() {
  var container = $(this);
  container.append('<div class="cycler_controls"><a href="#" id="pause_resume" class="active">pause</a>');
  for (var j = first_pic; j < last_pic;) {
    // 统一处理图片编号格式，和控制按钮的rel值匹配
    var picNum = j < 10 ? '0' + j : j.toString();
    var displayText = j < 10 ? picNum : (j + 1).toString();
    // 添加控制按钮
    container.find('.cycler_controls').append('<a class="page" href="#" rel="' + picNum + '">' + displayText + '</a>');
    // 给对应位置的图片绑定匹配的data-index属性
    container.find('img').eq(j - first_pic).attr('data-index', picNum);
    j++
  }
});

轮播驱动函数（新增按钮高亮逻辑） #

function cycleImages(container) {
  var $active = container.find('img.active');
  var $next = ($active.next('img').length > 0) ? $active.next('img') : container.find('img:first');
  $next.css('z-index', 2); // 把下一张图片提前到层级顶端

  $active.fadeOut(1500, function() { // 上一张图片淡出完成后执行
    $active.css('z-index', 1).show().removeClass('active'); // 重置上一张的层级和状态
    $next.css('z-index', 3).addClass('active'); // 设置当前图片为激活状态

    // --- 新增：高亮对应控制按钮 ---
    var currentPicIndex = $next.data('index');
    // 先移除所有分页按钮的高亮状态
    container.find('.cycler_controls .page').removeClass('active');
    // 给匹配编号的按钮添加高亮类
    container.find('.cycler_controls .page[rel="' + currentPicIndex + '"]').addClass('active');
  });

  var timer = setTimeout(function() {
    cycleImages(container)
  }, 3000);
  container.data('timer', timer);
}

关键逻辑说明 #

1. 绑定图片与按钮的关联标识：通过给每个图片添加data-index属性，让它的值和对应控制按钮的rel属性完全一致，这样轮播切换时能快速定位到对应按钮。
2. 切换时同步高亮状态：在图片切换完成的回调里，先清空所有分页按钮的高亮类，再给当前激活图片对应的按钮加上高亮类，避免出现多个按钮同时高亮的问题。
3. 高亮样式定义：需要在CSS里添加.page.active的样式，比如：

.page.active {
  background-color: #2196F3;
  color: #fff;
  border-radius: 4px;
  /* 可根据需求调整其他样式 */
}

可选：点击按钮切换轮播 #

如果需要实现点击控制按钮直接切换到对应图片并同步高亮，可以补充以下代码：

$('.cycler_controls .page').on('click', function(e) {
  e.preventDefault();
  var container = $(this).closest('.cycler');
  var targetIndex = $(this).attr('rel');
  var $targetImg = container.find('img[data-index="' + targetIndex + '"]');

  // 停止当前轮播计时器
  clearTimeout(container.data('timer'));

  // 切换图片状态
  var $active = container.find('img.active');
  $active.css('z-index', 1).removeClass('active');
  $targetImg.css('z-index', 3).addClass('active').show();

  // 同步按钮高亮
  container.find('.cycler_controls .page').removeClass('active');
  $(this).addClass('active');

  // 重新启动轮播
  var timer = setTimeout(function() {
    cycleImages(container)
  }, 3000);
  container.data('timer', timer);
});

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