所以我试图做一个类似于w3schools的函数。该功能需要管理两件事。 1.在调用当前页面时,将“ .active”类添加到点中。 2.当用户单击点进入该页面。
在我的代码中,如果我在通过函数添加类时留出一些空间 Example(dots [sliderIndex] .classList.add(“ active”);)现在可以单击并继续浏览该页面,但是如果我削减了空格(dots [sliderIndex] .classList.add(“ active”);)现在显示活动状态,但单击不起作用的点。 这让我非常困惑...请,伙计们,如果您能向我解释其背后的逻辑以及如何使之工作。
var sliderIndex = 0;
let next2 = document.querySelector(".next2");
let prev2 = document.querySelector(".prev2");
function showNews(n) {
const slider = document.getElementsByClassName("news");
const dots = document.getElementsByClassName("dot");
for (i = 0; i < slider.length; i++) {
slider[i].style.display = "none";
}
if (n < 0) {
sliderIndex = slider.length - 1;
}
if (n > slider.length - 1) {
sliderIndex = 0;
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", " ");
}
slider[sliderIndex].style.display = "block";
dots[sliderIndex].classList.add(" active");
}
function currentSlide(n) {
showNews((sliderIndex = n));
}
function incrementSlides2(n) {
showNews((sliderIndex += n));
}
next2.addEventListener("click", function() {
incrementSlides2(1);
});
prev2.addEventListener("click", function() {
incrementSlides2(-1);
});
showNews(sliderIndex);
#section-three .slideshow-container2 #dots {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
justify-content: center;
}
#section-three .slideshow-container2 .dot {
cursor: pointer;
height: 15px;
width: 15px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
-webkit-transition: background-color 0.6s ease;
transition: background-color 0.6s ease;
}
#section-three .slideshow-container2 .dot:hover,
#section-three .slideshow-container2 .dot.active {
background: black;
}
.active{background:red}
<section id="section-three">
<div class="container slideshow-container2">
<div class="news">
<div class="news-content">
<div class="buttons">
<a class="btn company-btn" href="#">COMPANY NEWS</a>
<a class="btn industry-btn" href="#">INDUSTRY NEWS</a>
</div>
<h1>OUR PEOPLE ARE OUT STONGEST ASSET </h1>
</div>
</div>
<div class="news news2">
<div class="news2-content">
<div class="buttons">
<a class="btn company-btn" href="#">COMPANY NEWS</a>
<a class="btn industry-btn" href="#">INDUSTRY NEWS</a>
</div>
<h1 class="media-room">MEDIA ROOM </h1>
<div class="img">
<img src="/Core/img/media.jpg" style="width:500px" alt="">
</div>
</div>
</div>
<div id="dots">
<span class="dot" onclick="currentSlide(1)"></span>
<span class="dot" onclick="currentSlide(2)"></span>
</div>
<a href="javascript:void(0);" class="prev2"></a>
<a href="javascript:void(0);" class="next2"></a>
</div>
</section>