产品轮播图点击后无法自动居中滑动问题求助

我使用JavaScript开发了一款包含10个产品项的轮播组件，需求为：点击任意未聚焦产品时，该产品放大显示详情并处于居中位置，同时所有产品项滑动至目标产品居中状态。但当前点击产品后，所有产品项无滑动效果。

轮播图截图：

对应的JS代码：

jQuery(document).ready(function($) {
    const carousel = $('.carousel-custom');
    const items = $('.carousel-item');
    let focusedIndex = 5; // 初始聚焦第6个项（索引从0开始）

// 居中聚焦项的函数
function centerItem(index) {
    const item = $(items[index]);
    const carouselWidth = carousel.width();
    const itemWidth = item.outerWidth(true);
    
    // 计算使项居中的滚动位置
    const scrollPosition = 135;
    // 调试输出
    console.log('Focused Index:', index);
    console.log('Item Position:', item.position().left);
    console.log('Carousel Width:', carouselWidth);
    console.log('Item Width:', itemWidth);
    console.log('Scroll Position:', scrollPosition);

    // 确保滚动位置不小于0或超出边界
    if (scrollPosition < 0) {
        carousel.animate({ scrollLeft: 0 }, 300);
    } else if (scrollPosition + carouselWidth > carousel[0].scrollWidth) {
        carousel.animate({ scrollLeft: carousel[0].scrollWidth - carouselWidth }, 300);
    } else {
        // 动画滚动到计算出的位置
        carousel.animate({ scrollLeft: scrollPosition }, 300);
    }
}

// 根据索引设置项的聚焦状态
function setFocus(index) {
    // 移除所有项的focused类
    items.removeClass('focused');
    // 给指定项添加focused类
    $(items[index]).addClass('focused');
    // 居中聚焦项
    centerItem(index);
}

// 触发聚焦项的点击事件
function triggerClick(index) {
    items.eq(index).trigger('click');
}

// 初始设置第三个项聚焦并触发点击
setFocus(focusedIndex);
triggerClick(focusedIndex); // 模拟点击第三个项

// 轮播项的点击事件
items.on('click', function() {
    const clickedIndex = $(this).index();
    console.log('Clicked Index:', clickedIndex); // 调试输出
    setFocus(clickedIndex); // 聚焦点击的项
});

});

问题原因 #

centerItem函数中scrollPosition被硬编码为固定值135，没有根据点击的产品项动态计算正确的滚动位置，导致无论点击哪个项，滚动位置都不变，因此看不到滑动效果。

修复方案 #

修改centerItem函数中的滚动位置计算逻辑，替换为动态计算的公式，确保目标项能居中显示：

修复后的centerItem函数 #

function centerItem(index) {
    const item = $(items[index]);
    const carouselWidth = carousel.width();
    const itemWidth = item.outerWidth(true);
    
    // 动态计算使项居中的滚动位置：项的左侧偏移量减去容器与项的宽度差的一半
    const scrollPosition = item.position().left - (carouselWidth - itemWidth) / 2;
    // 调试输出
    console.log('Focused Index:', index);
    console.log('Item Position:', item.position().left);
    console.log('Carousel Width:', carouselWidth);
    console.log('Item Width:', itemWidth);
    console.log('Scroll Position:', scrollPosition);

    // 限制滚动位置在合法范围内，避免超出边界
    const minScroll = 0;
    const maxScroll = carousel[0].scrollWidth - carouselWidth;
    const finalScroll = Math.max(minScroll, Math.min(scrollPosition, maxScroll));
    
    // 执行滚动动画
    carousel.animate({ scrollLeft: finalScroll }, 300);
}

关键说明 #

1. item.position().left获取的是当前项相对于轮播容器的左侧偏移量，是动态变化的，能准确反映项的位置
2. 公式item.position().left - (carouselWidth - itemWidth)/2的作用是让项的中心点与轮播容器的中心点对齐，实现真正的居中效果
3. 使用Math.max和Math.min简化边界判断逻辑，确保滚动位置不会小于0或超出容器的最大可滚动范围

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