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;
}

滑块中的当前点为白色

1 个答案: