写一个带有左右箭头的轮播图代码
时间: 2023-06-06 15:06:16 浏览: 59
好的,以下是一个简单的带有左右箭头的轮播图的 HTML 和 CSS 代码,你可以在此基础上进行修改和完善。
HTML 代码:
```
<div class="slider">
<div class="slide"><img src="https://picsum.photos/id/237/500/300" alt=""></div>
<div class="slide"><img src="https://picsum.photos/id/238/500/300" alt=""></div>
<div class="slide"><img src="https://picsum.photos/id/239/500/300" alt=""></div>
<div class="slide"><img src="https://picsum.photos/id/240/500/300" alt=""></div>
<a class="prev" onclick="prevSlide()">❮</a>
<a class="next" onclick="nextSlide()">❯</a>
</div>
```
CSS 代码:
```
.slider {
position: relative;
width: 500px;
height: 300px;
overflow: hidden;
margin: 0 auto;
}
.slide {
position: absolute;
width: 500px;
height: 300px;
opacity: 0;
transition: opacity 0.5s ease-in-out;
}
.slide img {
width: 100%;
height: 100%;
object-fit: cover;
}
.slide.active {
opacity: 1;
}
.prev, .next {
position: absolute;
top: 50%;
transform: translateY(-50%);
color: #fff;
font-size: 30px;
cursor: pointer;
user-select: none;
}
.prev {
left: 10px;
}
.next {
right: 10px;
}
```
JS 代码:
```
var slideIndex = 1;
showSlide(slideIndex);
function nextSlide() {
showSlide(slideIndex += 1);
}
function prevSlide() {
showSlide(slideIndex -= 1);
}
function showSlide(n) {
var slides = document.getElementsByClassName("slide");
if (n > slides.length) {
slideIndex = 1;
}
if (n < 1) {
slideIndex = slides.length;
}
for (var i = 0; i < slides.length; i++) {
slides[i].classList.remove("active");
}
slides[slideIndex-1].classList.add("active");
}
```
注意:以上代码仅为示例代码,仅供参考,具体实现需要根据项目实际需求进行修改和完善。