打一个手动轮播图的代码
时间: 2024-02-15 20:03:07 浏览: 17
好的,以下是一个简单的手动轮播图的代码:
HTML代码:
```html
<div class="carousel">
<img src="slide1.jpg" alt="Slide 1">
<img src="slide2.jpg" alt="Slide 2">
<img src="slide3.jpg" alt="Slide 3">
<img src="slide4.jpg" alt="Slide 4">
</div>
<button class="prev">Prev</button>
<button class="next">Next</button>
```
CSS代码:
```css
.carousel {
position: relative;
overflow: hidden;
width: 100%;
}
.carousel img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
transition: opacity 0.5s ease-in-out;
}
.carousel img.active {
opacity: 1;
}
.prev, .next {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 10;
background: rgba(0, 0, 0, 0.5);
color: #fff;
padding: 10px;
border: none;
outline: none;
cursor: pointer;
}
.prev {
left: 0;
}
.next {
right: 0;
}
```
JavaScript代码:
```javascript
const carousel = document.querySelector(".carousel");
const slides = carousel.querySelectorAll("img");
const prevBtn = document.querySelector(".prev");
const nextBtn = document.querySelector(".next");
let currentSlide = 0;
function showSlide(index) {
if (index < 0) {
index = slides.length - 1;
} else if (index >= slides.length) {
index = 0;
}
slides.forEach((slide) => slide.classList.remove("active"));
slides[index].classList.add("active");
currentSlide = index;
}
showSlide(currentSlide);
prevBtn.addEventListener("click", () => {
showSlide(currentSlide - 1);
});
nextBtn.addEventListener("click", () => {
showSlide(currentSlide + 1);
});
```
这个轮播图使用了绝对定位来叠加图片,同时使用了opacity属性来实现淡入淡出的效果。两个按钮分别绑定了事件,点击按钮会调用showSlide函数,来切换图片。showSlide函数会根据传入的index参数来显示相应的图片,并更新currentSlide的值。