Question

   <body>
<div id="slide">
      <div class="slideshow-container">
        <div class="mySlides fade"> <img src="images/Image01.png"> </div>
        <div class="mySlides fade"> <img src="images/Image02.png"> </div>
        <div class="mySlides fade"> <img src="images/Image03.png"> </div>
        <div class="mySlides fade"> <img src="images/Image04.png"> </div>
        <div class="mySlides fade"> <img src="images/Image05.png"> </div>
        <div class="mySlides fade"> <img src="images/Image06.png"> </div>
      </div>
     </div>
    <div class="dots"> 
          <span class="dot" onclick="currentSlide(1)"></span> 
          <span class="dot" onclick="currentSlide(2)"></span> 
          <span class="dot" onclick="currentSlide(3)"></span>
          <span class="dot" onclick="currentSlide(4)"></span>
          <span class="dot" onclick="currentSlide(5)"></span>
          <span class="dot" onclick="currentSlide(6)"></span>
   </div
</body>

我正尝试自定义滑动条中的项目符号，如图中所示。有谁可以帮助我。

Answer 1

您可以在:before上使用CSS伪元素:after或.dot。

有很多方法可以做到，这只是一种方法。

.dot {
  display: inline-block;
  border: 1px solid brown;
  border-radius: 50%;
}
.dot:before {
  content: '';
  display: block;
  background: brown;
  width:10px;
  height: 10px;
  border-radius: 50%;
  margin: 1px;
}

.dot.active:before {
  background: red;
}

<div class="dots"> 
          <span class="dot" onclick="currentSlide(1)"></span> 
          <span class="dot active" onclick="currentSlide(2)"></span> 
          <span class="dot" onclick="currentSlide(3)"></span>
          <span class="dot" onclick="currentSlide(4)"></span>
          <span class="dot" onclick="currentSlide(5)"></span>
          <span class="dot" onclick="currentSlide(6)"></span>
   </div>

带有自定义项目符号的自动图像滑块

1 个答案: