我正在尝试调试这个幻灯片，除了一件事我已经理解了所有内容，这就是为什么当他们替换或添加 action 类时，他们在名称中使用空格，如下所示下面的图片 我在谷歌上搜索过(实际上我不知道我必须输入什么才能得到正确的答案)所以我试图阅读 Mdn 和 w3schools 中的 className 但没有结果
这是代码:
HTML
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
</head>
<link rel="stylesheet" href="style.css">
<body>
<div class="slider-container">
<div class="mySlide fade">
<img src="1.jpg" alt="" class="img">
</div>
<div class="mySlide fade">
<img src="2.jpg" alt="" class="img">
</div>
<div class="mySlide fade">
<img src="3.jpg" alt="" class="img">
</div>
<div class="btns">
<span class="btn" onclick="currentSlide(1)"></span>
<span class="btn" onclick="currentSlide(2)"></span>
<span class="btn" onclick="currentSlide(3)"></span>
</div>
</div>
<script src="script.js" charset="utf-8"></script>
</body>
</html>
CSS
*{
box-sizing: border-box;
}
.img{
width: 100%;
height: 666.656px;
}
.mySlide{
max-width: 1000px;
position: relative;
margin: auto;
}
.btns{
text-align: center;
}
.btn{
cursor: pointer;
display: inline-block;
width: 20px;
height: 20px;
border-radius: 50%;
background-color: #bbb;
margin: 0 2px;
}
.active, .btn:hover{
background-color: pink;
}
.fade{
animation-name: fade;
animation-duration: 1.5s;
}
@keyframes fade {
0%{
opacity: 0.4;
}
100%{
opacity: 1;
}
}
Js
var slideIndex=1;
showSlide(slideIndex);
function currentSlide(n){
showSlide(slideIndex=n);
}
function showSlide(n){
var i;
var slides=document.getElementsByClassName("mySlide");
var dotz=document.getElementsByClassName("btn");
for(i=0;i<slides.length;i++){
slides[i].style.display="none";
}
for(i=0;i<dotz.length;i++){
dotz[i].className=dotz[i].className.replace(" active","");
}
slides[slideIndex-1].style.display="block";
dotz[slideIndex-1].className+=" active";
}
最佳答案
他们使用+= 来连接。添加一个空格将使单词如 Word1 Word2 Word3 而不是 Word1Word2Word3 这样可以将事件的单词添加到类中(如果已经存在的话)。
例如你有这个简单的例子:
如果您将类 active 添加为 "active" 并使用 += 它将是 class="testactive"
如果您将 active 添加为 "active"，它将是 class="test active"
他们这样做是为了添加一个单独的类。
可以查看 += here
关于javascript - 调试 Javascript 幻灯片，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54092444/