gpt4 book ai didi

javascript - 带有自定义元素符号的自动图像 slider

转载 作者:行者123 更新时间:2023-11-28 01:22:57 25 4
gpt4 key购买 nike

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

我正在尝试自定义 slider 中的元素符号,如图所示。谁能帮帮我。

enter image description here

最佳答案

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

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

.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>

关于javascript - 带有自定义元素符号的自动图像 slider ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51393951/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com