javascript - 推荐滑块 Javascript 中的问题
问题描述
我正在尝试在 Javascript 中制作推荐滑块，但我无法让滑块移动到下一张幻灯片。如果您在第一张或最后一张幻灯片中，它可以正常工作，否则它不会移动。尝试了许多不同的解决方案，但都没有奏效。我是初学者，所以也许答案就在我眼前，但我似乎找不到。谢谢你的帮助！
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>解决方案
您必须更改if语句并-135在移动公式中使用两种情况下的值。此外，当移动到上一张幻灯片时，您应该减少 counter 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>推荐阅读
- docker - x509：证书对任何名称都无效，但想匹配 myregistry.lk
- php - 如何在此 JSON 中正确添加 2 个项目？- 拉拉维尔
- c++ - 重载 << 和 >> 运算符：程序编译但运行它不接受输入
- sql - 如何将 XML 类型的返回文本转换为选择列
- javascript - 保存在选项卡中时文本相互重叠
- wordpress - Woocommerce 如何禁用添加到购物车选项
- angular - “错误：需要使用 JIT 编译器编译可注入的‘SocialAuthService’，但‘@angular/compiler’不可用。” 在角 12
- python - 如何在 Windows 中将 ghostscript DLL 库提供给 python？
- java - 我正在尝试接受并显示数组元素，并且出现此错误：
- r - 从 Bio Oracle 提取环境数据的问题