用js实现轮播图片要求下方有小圆点
时间: 2024-05-08 18:15:09 浏览: 15
以下是一个简单的实现轮播图片并带有小圆点的JS代码示例:
HTML部分:
```html
<div class="slider">
<div class="slider-images">
<img src="image1.jpg" alt="Image 1">
<img src="image2.jpg" alt="Image 2">
<img src="image3.jpg" alt="Image 3">
</div>
<div class="slider-dots"></div>
</div>
```
CSS部分:
```css
.slider {
position: relative;
}
.slider-images {
position: relative;
width: 100%;
height: 400px;
overflow: hidden;
}
.slider-images img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
transition: opacity 0.5s ease-in-out;
}
.slider-images img.active {
opacity: 1;
}
.slider-dots {
position: absolute;
bottom: 10px;
left: 50%;
transform: translateX(-50%);
display: flex;
justify-content: center;
}
.slider-dots button {
width: 10px;
height: 10px;
margin: 0 5px;
border: none;
border-radius: 50%;
background-color: gray;
cursor: pointer;
}
.slider-dots button.active {
background-color: white;
}
```
JS部分:
```js
const sliderImages = document.querySelectorAll('.slider-images img');
const sliderDots = document.querySelector('.slider-dots');
let currentImageIndex = 0;
// 创建小圆点按钮
for (let i = 0; i < sliderImages.length; i++) {
const button = document.createElement('button');
button.addEventListener('click', () => {
showImage(i);
});
sliderDots.appendChild(button);
}
// 显示指定索引的图片和按钮
function showImage(index) {
sliderImages[currentImageIndex].classList.remove('active');
sliderDots.children[currentImageIndex].classList.remove('active');
currentImageIndex = index;
sliderImages[currentImageIndex].classList.add('active');
sliderDots.children[currentImageIndex].classList.add('active');
}
// 自动轮播
setInterval(() => {
let nextIndex = currentImageIndex + 1;
if (nextIndex >= sliderImages.length) {
nextIndex = 0;
}
showImage(nextIndex);
}, 3000);
// 显示第一张图片和按钮
showImage(0);
sliderDots.children[0].classList.add('active');
```