推荐滑块中的问题 Javascript

Question

我正在尝试在 Javascript 中制作一个推荐滑块，但我无法让滑块移动到下一张幻灯片。如果您在第一张或最后一张幻灯片中，它工作正常，否则它不会移动。尝试了许多不同的解决方案，但其中 none 有效。我是初学者，所以也许答案就在我眼前，但我似乎找不到。感谢您的帮助！

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

for (let i = 0; i < arrowleft.length; i++) {
    arrowright[i].addEventListener("click", getNextTestimonial);
    arrowleft[i].addEventListener("click", getPreviousTestimonial);
};

function getPreviousTestimonial(){
    if (testimonials[0]){
        counter = 3;
    } else {
        counter += 1;
    };
    for (var key in testimonials){
        move = -135 * counter;
        testimonials[key].style.transition = "transform 1.5s ease";
        testimonials[key].style.transform = "translate(" + move + "%)";
    };
};
function getNextTestimonial(){
    if (testimonials[3]){
        counter = 0;
    } else {
        counter += 1;
    };
    for (var key in testimonials){
        move = 135 * counter;
        testimonials[key].style.transition = "transform 1.5s ease";
        testimonials[key].style.transform = "translate(" + move + "%)";
    };  
};

*{
    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;
}
.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;
}

<!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>
    <div id="maincontainer">

        <img class="arrowleft" src="https://toppng.com/uploads/preview/arrow-left-to-right-11550125569m6ffhoapdb.png">
        <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>
        <img class="arrowright" src="https://upload.wikimedia.org/wikipedia/commons/2/24/Arrow-right-512.png">

        <img class="arrowleft" src="https://toppng.com/uploads/preview/arrow-left-to-right-11550125569m6ffhoapdb.png">
        <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>
        <img class="arrowright" src="https://upload.wikimedia.org/wikipedia/commons/2/24/Arrow-right-512.png">

        <img class="arrowleft" src="https://toppng.com/uploads/preview/arrow-left-to-right-11550125569m6ffhoapdb.png">
        <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>
        <img class="arrowright" src="https://upload.wikimedia.org/wikipedia/commons/2/24/Arrow-right-512.png">

        <img class="arrowleft" src="https://toppng.com/uploads/preview/arrow-left-to-right-11550125569m6ffhoapdb.png">
        <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>
        <img class="arrowright" src="https://upload.wikimedia.org/wikipedia/commons/2/24/Arrow-right-512.png">

    </div>

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

Answer 1

您必须更改 if 语句并在移动公式中的两种情况下都使用值 -135。此外，当移动到上一张幻灯片时，您应该减少计数器 counter -= 1;.

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

for (let i = 0; i < arrowleft.length; i++) {
    arrowright[i].addEventListener("click", getNextTestimonial);
    arrowleft[i].addEventListener("click", getPreviousTestimonial);
};

function getPreviousTestimonial() {
    if (counter === 0) {
        counter = 3;
    } else {
        counter -= 1;
    };
    for (var key in testimonials){
        move = -135 * counter;
        testimonials[key].style.transition = "transform 1.5s ease";
        testimonials[key].style.transform = "translate(" + move + "%)";
    };
};
function getNextTestimonial(){
    if (counter === 3) {
        counter = 0;
    } else {
        counter += 1;
    };
    for (var key in testimonials){
        move = -135 * counter;
        testimonials[key].style.transition = "transform 1.5s ease";
        testimonials[key].style.transform = "translate(" + move + "%)";
    };  
};

*{
    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;
}
.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;
}

<!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>
    <div id="maincontainer">

        <img class="arrowleft" src="https://toppng.com/uploads/preview/arrow-left-to-right-11550125569m6ffhoapdb.png">
        <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>
        <img class="arrowright" src="https://upload.wikimedia.org/wikipedia/commons/2/24/Arrow-right-512.png">

        <img class="arrowleft" src="https://toppng.com/uploads/preview/arrow-left-to-right-11550125569m6ffhoapdb.png">
        <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>
        <img class="arrowright" src="https://upload.wikimedia.org/wikipedia/commons/2/24/Arrow-right-512.png">

        <img class="arrowleft" src="https://toppng.com/uploads/preview/arrow-left-to-right-11550125569m6ffhoapdb.png">
        <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>
        <img class="arrowright" src="https://upload.wikimedia.org/wikipedia/commons/2/24/Arrow-right-512.png">

        <img class="arrowleft" src="https://toppng.com/uploads/preview/arrow-left-to-right-11550125569m6ffhoapdb.png">
        <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>
        <img class="arrowright" src="https://upload.wikimedia.org/wikipedia/commons/2/24/Arrow-right-512.png">

    </div>

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

推荐滑块中的问题 Javascript

Problem in Testimonials Slider Javascript

html

javascript

css

slider

testimonials