在JS轮播中围绕子弹圈

2024-05-20 • 问答

请告知当子弹（幻灯片）处于活动状态时如何使用CSS在子弹上画圈吗？

现在我的CSS代码是：

.slide-dot {
  cursor: pointer;
  height: 10px;
  width: 10px;
  text-decoration: none;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
}

.active {
  background-color: #FFE600;
}

示例：

在点上添加填充和透明边框。使用background-clip: content-box可以防止背景影响填充和边框区域。启用时，将边框的颜色更改为currentColor。

Note:我已经使用currentColor通过一个属性来控制背景和边框。

.slide-dot {
  cursor: pointer;
  height: 10px;
  width: 10px;
  text-decoration: none;
  color: #bbb;
  background-color: currentColor;
  border-radius: 50%;
  display: inline-block;
  padding: 5px;
  background-clip: content-box;
  border: 1px solid transparent;
}

.active {
  color: #FFE600;
  border-color: currentColor;
}

<div class="slide-dot"></div>
<div class="slide-dot active"></div>
<div class="slide-dot"></div>
<div class="slide-dot"></div>
<div class="slide-dot"></div>

div {
  margin-top: 50px;
}

.dot {
  cursor: pointer;
  height: 12px;
  width: 12px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active,.dot:hover {
  background-color: black;
  border: 1px solid yellow;
  border-radius: 50%;
  position: relative;
  box-shadow: 0 0 0 1px #cfd1d1;
}

<!-- The bullets -->
<div style="text-align:center">
  <span class="dots"><span class="dot" onclick="currentSlide(1)"></span></span>
  <span class="dots"><span class="dot" onclick="currentSlide(2)"></span></span>
  <span class="dots"><span class="dot" onclick="currentSlide(3)"></span></span>
</div>

希望您可以从中获得一些想法：）

在JS轮播中围绕子弹圈

xwhses 回答：在JS轮播中围绕子弹圈

大家都在问