JavaScript实现Testimonials轮播图中间屏无法正常滑动问题求助

架构老林

2026-10-7

问题核心原因

边界判断逻辑错误：原代码中if (testimonials[0])、if (testimonials[3])的判断永远为真，testimonials数组固定包含4个元素，不会随轮播位置变化，所以每次点击都会直接把计数器重置为0或3，不会出现中间1、2的状态，导致中间屏无法切换。
重复事件绑定：你给每个评价卡片都配了一组左右箭头，所有箭头都通过绝对定位叠在同一个视口位置，单次点击会触发多次绑定的事件，计数器值会异常跳动。
位移方向错误：点击右箭头切换下一张时，需要将整体内容向左平移，应该使用负的translate值，原代码右箭头使用正位移，方向完全相反。
结构冗余：每个卡片配箭头的写法没必要，全局只需要一组左右箭头即可。

修复后代码

HTML 调整

删除每个卡片内的箭头，仅保留一组全局箭头：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Testimonials</title>
    <link rel="stylesheet" href="testimonials.css">
</head>
<body>
    <h1>CLIENT TESTIMONIALS</h1>
    <!-- 全局仅保留一组箭头 -->
    <img class="arrowleft" src="https://toppng.com/uploads/preview/arrow-left-to-right-11550125569m6ffhoapdb.png">
    <img class="arrowright" src="https://upload.wikimedia.org/wikipedia/commons/2/24/Arrow-right-512.png">
    <div id="maincontainer">
        <div class="container" id="container1">
            <img src="face1.jpg" alt="Clients pic" class="clientpic">
            <h3>John</h3>
            <div class="starscontainer">
                <img src="https://upload.wikimedia.org/wikipedia/commons/b/bf/A_Black_Star.png" alt="stars" class="stars">
                <img src="https://upload.wikimedia.org/wikipedia/commons/b/bf/A_Black_Star.png" alt="stars" class="stars">
                <img src="https://upload.wikimedia.org/wikipedia/commons/b/bf/A_Black_Star.png" alt="stars" class="stars">
                <img src="https://upload.wikimedia.org/wikipedia/commons/b/bf/A_Black_Star.png" alt="stars" class="stars">
                <img src="https://upload.wikimedia.org/wikipedia/commons/b/bf/A_Black_Star.png" alt="stars" class="stars">
            </div>
            <p>"I had a great experience building my garden. Would definitely recommend them."</p>
        </div>
        <div class="container" id="container2">
            <img src="face2.jpg" alt="Clients pic" class="clientpic">
            <h3>Michael</h3>
            <div class="starscontainer">
                <img src="https://upload.wikimedia.org/wikipedia/commons/b/bf/A_Black_Star.png" alt="stars" class="stars">
                <img src="https://upload.wikimedia.org/wikipedia/commons/b/bf/A_Black_Star.png" alt="stars" class="stars">
                <img src="https://upload.wikimedia.org/wikipedia/commons/b/bf/A_Black_Star.png" alt="stars" class="stars">
                <img src="https://upload.wikimedia.org/wikipedia/commons/b/bf/A_Black_Star.png" alt="stars" class="stars">
            </div>
            <p>"Great service, very professional people. Good value for money, would call them again."</p>
        </div>
        <div class="container" id="container3">
            <img src="face3.jpg" alt="Clients pic" class="clientpic">
            <h3>Anna</h3>
            <div class="starscontainer">
                <img src="https://upload.wikimedia.org/wikipedia/commons/b/bf/A_Black_Star.png" alt="stars" class="stars">
                <img src="https://upload.wikimedia.org/wikipedia/commons/b/bf/A_Black_Star.png" alt="stars" class="stars">
                <img src="https://upload.wikimedia.org/wikipedia/commons/b/bf/A_Black_Star.png" alt="stars" class="stars">
                <img src="https://upload.wikimedia.org/wikipedia/commons/b/bf/A_Black_Star.png" alt="stars" class="stars">
                <img src="https://upload.wikimedia.org/wikipedia/commons/b/bf/A_Black_Star.png" alt="stars" class="stars">
            </div>
            <p>"They did a great work renewing my garden. Really happy with them."</p>
        </div>
        <div class="container" id="container4">
            <img src="face4.jpg" alt="Clients pic" class="clientpic">
            <h3>Mary</h3>
            <div class="starscontainer">
                <img src="https://upload.wikimedia.org/wikipedia/commons/b/bf/A_Black_Star.png" alt="stars" class="stars">
                <img src="https://upload.wikimedia.org/wikipedia/commons/b/bf/A_Black_Star.png" alt="stars" class="stars">
                <img src="https://upload.wikimedia.org/wikipedia/commons/b/bf/A_Black_Star.png" alt="stars" class="stars">
            </div>
            <p>"Good workers, they finished works neatly and right on time. Highly recommendable"</p>
        </div>
    </div>

<script type="text/javascript" src="testimonials.js"></script>
</body>
</html>

CSS 代码

仅新增箭头层级保证可点击，其余原样式可保留：

*{
    box-sizing: border-box;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
}
body{
    background-image: url("grass.jpg");
    background-repeat: no-repeat;
    background-size: 100vw;
    overflow: hidden;
}
h1{
    text-align: center;
    margin: 15vh auto;
    font-weight: normal;
}
.arrowleft,
.arrowright{
    width: 3vw;
    cursor: pointer;
    z-index: 99; /* 新增：保证箭头在最上层可点击 */
}
.arrowleft:hover{
    content: url("arrowleftwhite.png");
    width: 3vw;
}
.arrowright:hover{
    content: url("arrowrightwhite.png");
    width: 3vw;
}
.arrowleft{
    position: absolute;
    top: 57vh;
    left: 14vw;
}
.arrowright{
    position: absolute;
    top: 57vh;
    left: 83vw;
}
#maincontainer{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    column-gap: 10vw;
}
.container{
    border: 2px solid white;
    width: 70vw;
    margin-left: 14.5vw;
    background: rgba(255, 255, 255, 0.5);
}
.clientpic{
    width: 10vw;
    border-radius: 50%;
    border: none;
    display: block;
    margin: -7vh auto;
}
h3{
    text-align: center;
    margin-top: 8vh;
}
.starscontainer{
    display: flex;
    flex-direction: row;
    justify-content: center;
}
.stars{
    width: 2vw;
}
p{
    text-align: center;
    font-weight: bold;
    margin: 8vh auto;
}

JavaScript 代码

var counter = 0;
const TOTAL_TESTIMONIALS = 4;
var testimonials = Array.from(document.getElementsByClassName("container"));
var arrowleft = document.querySelector(".arrowleft");
var arrowright = document.querySelector(".arrowright");
var move = 0;

// 绑定点击事件
arrowright.addEventListener("click", getNextTestimonial);
arrowleft.addEventListener("click", getPreviousTestimonial);

function getPreviousTestimonial(){
    // 边界判断：当前是第一张，点击上一张跳转到最后一张
    if (counter === 0) {
        counter = TOTAL_TESTIMONIALS - 1;
    } else {
        counter -= 1;
    }
    move = -135 * counter;
    testimonials.forEach(item => {
        item.style.transition = "transform 1.5s ease";
        item.style.transform = `translate(${move}%)`;
    })
}

function getNextTestimonial(){
    // 边界判断：当前是最后一张，点击下一张跳转到第一张
    if (counter === TOTAL_TESTIMONIALS - 1) {
        counter = 0;
    } else {
        counter += 1;
    }
    move = -135 * counter;
    testimonials.forEach(item => {
        item.style.transition = "transform 1.5s ease";
        item.style.transform = `translate(${move}%)`;
    })
}

修改后即可正常实现四张评价的循环轮播，所有屏幕切换逻辑正常。

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

JavaScript实现Testimonials轮播图中间屏无法正常滑动问题求助

问题核心原因 #

修复后代码 #

HTML 调整

CSS 代码

JavaScript 代码

问题核心原因

修复后代码