如何用jQuery实现点击Prev/Next按钮循环逐个滑动bx-content？

没问题，我帮你搞定这个逐个滑动、循环展示的需求，直接上完整可运行的代码，之后再拆解关键逻辑：

完整代码示例 #

HTML #

<!DOCTYPE html>
<html>
<head>
    <title>循环滑动内容</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="bx-wrapper">
        <button class="slide-btn prev-btn">Prev</button>
        <div class="bx-container">
            <div class="bx-inner">
                <!-- 这里放你的bx-content，示例先写12个 -->
                <div class="bx-content">内容1</div>
                <div class="bx-content">内容2</div>
                <div class="bx-content">内容3</div>
                <div class="bx-content">内容4</div>
                <div class="bx-content">内容5</div>
                <div class="bx-content">内容6</div>
                <div class="bx-content">内容7</div>
                <div class="bx-content">内容8</div>
                <div class="bx-content">内容9</div>
                <div class="bx-content">内容10</div>
                <div class="bx-content">内容11</div>
                <div class="bx-content">内容12</div>
            </div>
        </div>
        <button class="slide-btn next-btn">Next</button>
    </div>

    <script src="script.js"></script>
</body>
</html>

CSS (styles.css) #

.bx-wrapper {
    display: flex;
    align-items: center;
    gap: 20px;
    max-width: 960px;
    margin: 20px auto;
}

.bx-container {
    width: calc(300px * 3 + 20px * 2); /* 3个item宽度 + 2个间距 */
    overflow: hidden;
    border: 1px solid #eee;
}

.bx-inner {
    display: flex;
    gap: 20px;
    transition: transform 0.3s ease; /* 平滑过渡动画 */
}

.bx-content {
    width: 300px;
    height: 200px;
    background-color: #f5f5f5;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    border-radius: 8px;
    flex-shrink: 0; /* 禁止item缩小，保证宽度固定 */
}

.slide-btn {
    padding: 10px 20px;
    font-size: 18px;
    cursor: pointer;
    border: none;
    background-color: #4CAF50;
    color: white;
    border-radius: 4px;
}

.slide-btn:hover {
    background-color: #45a049;
}

JavaScript (script.js) #

// 获取元素
const prevBtn = document.querySelector('.prev-btn');
const nextBtn = document.querySelector('.next-btn');
const bxInner = document.querySelector('.bx-inner');
const bxContents = document.querySelectorAll('.bx-content');

// 关键参数
const itemCount = bxContents.length;
const visibleCount = 3; // 每次显示3个
const itemWidth = bxContents[0].offsetWidth + parseInt(getComputedStyle(bxContents[0]).gap); // item宽度 + 间距
let currentIndex = 0; // 当前起始位置索引

// 更新滑动位置
function updateSlide() {
    // 计算偏移量：当前索引 * 单个item宽度
    const offset = -currentIndex * itemWidth;
    bxInner.style.transform = `translateX(${offset}px)`;
}

// Next按钮逻辑
nextBtn.addEventListener('click', () => {
    currentIndex++;
    // 当滚动到最后一个可显示的起始位置时，回到开头
    if (currentIndex > itemCount - visibleCount) {
        currentIndex = 0;
    }
    updateSlide();
});

// Prev按钮逻辑
prevBtn.addEventListener('click', () => {
    currentIndex--;
    // 当滚动到第一个之前，跳到最后一个可显示的起始位置
    if (currentIndex < 0) {
        currentIndex = itemCount - visibleCount;
    }
    updateSlide();
});

// 初始化显示
updateSlide();

关键逻辑拆解 #

• CSS布局核心：

  • .bx-container设置固定宽度，刚好能放下3个bx-content，并设置overflow:hidden隐藏超出部分
  • .bx-inner用flex横向排列所有内容，flex-shrink:0保证每个bx-content宽度不被压缩
  • 用transition实现滑动的平滑动画

• JavaScript核心逻辑：

  1. 计算单个bx-content的实际占用宽度（包括间距），这样每次滑动的距离准确
  2. currentIndex跟踪当前显示区域的起始item索引，点击Next时索引+1，Prev时索引-1
  3. 循环判断：当Next到最后一个可显示的起始位置（即itemCount - visibleCount），重置为0；Prev到0以下时，跳转到最后一个起始位置
  4. 用transform: translateX实现滑动，比修改left属性更流畅，因为会触发GPU加速

• 循环效果说明：
  比如你有12个bx-content，每次显示3个，当点击Next到起始索引为9（显示10、11、12）时，再点击Next就会回到起始索引0（显示1、2、3）；点击Prev从起始索引0时，会跳到起始索引9（显示10、11、12）

你可以根据自己的需求调整bx-content的宽度、间距、显示数量这些参数，代码里都标了注释，很容易修改~

内容的提问来源于stack exchange，提问作者Mr.Ra