用简单css写一个轮播图
时间: 2023-10-16 19:10:06 浏览: 26
HTML:
```
<div class="slider">
<div class="slider-item">
<img src="image1.jpg" alt="Image 1">
</div>
<div class="slider-item">
<img src="image2.jpg" alt="Image 2">
</div>
<div class="slider-item">
<img src="image3.jpg" alt="Image 3">
</div>
</div>
```
CSS:
```
.slider {
position: relative;
width: 100%;
height: 500px;
overflow: hidden;
}
.slider-item {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
transition: opacity 1s ease-in-out;
}
.slider-item.active {
opacity: 1;
}
.slider-item img {
width: 100%;
height: 100%;
object-fit: cover;
}
.slider-nav {
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
display: flex;
justify-content: center;
align-items: center;
z-index: 1;
}
.slider-nav-button {
width: 10px;
height: 10px;
border-radius: 50%;
background-color: #fff;
margin: 0 10px;
cursor: pointer;
}
.slider-nav-button.active {
background-color: #000;
}
```
JavaScript:
```
const slider = document.querySelector('.slider');
const sliderItems = document.querySelectorAll('.slider-item');
const sliderNav = document.createElement('div');
sliderNav.classList.add('slider-nav');
for (let i = 0; i < sliderItems.length; i++) {
const navButton = document.createElement('div');
navButton.classList.add('slider-nav-button');
navButton.dataset.index = i;
if (i === 0) {
navButton.classList.add('active');
}
sliderNav.appendChild(navButton);
}
slider.appendChild(sliderNav);
let currentIndex = 0;
function showSlide(index) {
if (index < 0) {
index = sliderItems.length - 1;
}
if (index >= sliderItems.length) {
index = 0;
}
sliderItems[currentIndex].classList.remove('active');
sliderItems[index].classList.add('active');
sliderNav.querySelector(`[data-index="${currentIndex}"]`).classList.remove('active');
sliderNav.querySelector(`[data-index="${index}"]`).classList.add('active');
currentIndex = index;
}
setInterval(() => {
showSlide(currentIndex + 1);
}, 5000);
sliderNav.addEventListener('click', (e) => {
if (e.target.classList.contains('slider-nav-button')) {
const index = parseInt(e.target.dataset.index);
showSlide(index);
}
});
```