web点击小圆点实现轮播图
时间: 2023-10-29 15:06:57 浏览: 75
要实现点击小圆点切换轮播图,可以先在HTML中添加小圆点的标记,例如:
```html
<div class="slider">
<div class="slides">
<img src="slide1.jpg">
<img src="slide2.jpg">
<img src="slide3.jpg">
</div>
<div class="dots">
<span class="dot active"></span>
<span class="dot"></span>
<span class="dot"></span>
</div>
</div>
```
然后在CSS中设置小圆点的样式:
```css
.slider .dots {
display: flex;
justify-content: center;
margin-top: 10px;
}
.slider .dot {
width: 10px;
height: 10px;
border-radius: 50%;
background-color: #ccc;
margin: 0 5px;
cursor: pointer;
}
.slider .dot.active {
background-color: #333;
}
```
接着在JavaScript中监听小圆点的点击事件,并切换轮播图:
```javascript
const slides = document.querySelector('.slides').children;
const dots = document.querySelector('.dots').children;
let index = 0;
for (let i = 0; i < dots.length; i++) {
dots[i].addEventListener('click', function () {
// 切换小圆点
for (let j = 0; j < dots.length; j++) {
dots[j].classList.remove('active');
}
this.classList.add('active');
// 切换轮播图
for (let j = 0; j < slides.length; j++) {
slides[j].classList.remove('active');
}
index = i;
slides[index].classList.add('active');
});
}
```
以上是一个简单的实现方式,具体实现还需要根据实际情况调整。
相关推荐
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)