javascript - 白色 slider 的当前点

Question

我已经从 w3school 实现了一个 slider 。我还从另一个例子中实现了这些点来跟踪幻灯片。如果我单击它们，它们工作正常，问题是我无法使当前/事件点(从实际位置的幻灯片)显示为纯白色，让你知道你在那个点的位置。

HTML

<div class="dotsCentralizer">
    <span class="dots white" onclick="currentDiv(1)"></span>
    <span class="dots white" onclick="currentDiv(2)"></span>
    <span class="dots white" onclick="currentDiv(3)"></span>
    <span class="dots white" onclick="currentDiv(4)"></span>
</div>

CSS

.dots {
background-color: #000;
color: #fff;
display: inline-block;
width: 15px;
height: 15px;
border-radius: 50%;
margin-left: 5px;
margin-right: 5px;
}

.dots {
background-color: #000!important;
}

.white:hover {
background-color: #fff!important;
}

Javascript

 <script>
 var slideIndex = 1;
 showDivs(slideIndex);

 var myIndex = 0;
 carousel();

 function currentDiv(n) {
 showDivs(slideIndex = n);
 }

 function carousel() {
 var i;
 var x = document.getElementsByClassName("mySlides");
 for (i = 0; i < x.length; i++) {
   x[i].style.display = "none";  
 }
 myIndex++;
 if (myIndex > x.length) {myIndex = 1}    
 x[myIndex-1].style.display = "block";  
 setTimeout(carousel, 5000); // Change image every 2 seconds
 } 

 function showDivs(n) {
 var i;
 var x = document.getElementsByClassName("mySlides");
 var dots = document.getElementsByClassName("dots");
 if (n > x.length) {slideIndex = 1}    
 if (n < 1) {slideIndex = x.length}
 for (i = 0; i < x.length; i++) {
 x[i].style.display = "none";  
 }
 for (i = 0; i < dots.length; i++) {
 dots[i].className = dots[i].className.replace(" white", "");
 }
 x[slideIndex-1].style.display = "block";  
 dots[slideIndex-1].className += " white";
 }
 </script>

有人可以给我一些指导吗？谢谢!

Answer 1

白色类在您单击时在点上添加，但您在悬停时添加颜色

.white:hover {
  background-color: #fff!important;
}

改为

.white {
  background-color: #fff!important;
}