图片轮播代码
时间: 2023-07-02 12:19:33 浏览: 42
以下是一个简单的图片轮播的代码示例:
HTML:
```
<div class="slider">
<img src="img1.jpg" alt="Image 1">
<img src="img2.jpg" alt="Image 2">
<img src="img3.jpg" alt="Image 3">
</div>
<button class="prev">❮</button>
<button class="next">❯</button>
```
CSS:
```
.slider {
overflow: hidden;
width: 100%;
height: 400px;
position: relative;
}
.slider img {
width: 100%;
height: 400px;
display: none;
position: absolute;
top: 0;
left: 0;
}
.slider img.active {
display: block;
}
.prev, .next {
position: absolute;
top: 50%;
transform: translateY(-50%);
font-size: 30px;
background: none;
border: none;
color: white;
cursor: pointer;
}
.prev {
left: 0;
}
.next {
right: 0;
}
```
JavaScript:
```
var slideIndex = 0;
showSlides(slideIndex);
function showSlides(index) {
var slides = document.getElementsByClassName("slider")[0].getElementsByTagName("img");
var dots = document.getElementsByClassName("dot");
if (index >= slides.length) {
index = 0;
} else if (index < 0) {
index = slides.length - 1;
}
for (var i = 0; i < slides.length; i++) {
slides[i].classList.remove("active");
}
for (var i = 0; i < dots.length; i++) {
dots[i].classList.remove("active");
}
slides[index].classList.add("active");
dots[index].classList.add("active");
slideIndex = index;
}
document.getElementsByClassName("prev")[0].addEventListener("click", function() {
showSlides(slideIndex - 1);
});
document.getElementsByClassName("next")[0].addEventListener("click", function() {
showSlides(slideIndex + 1);
});
```
这段代码实现了基本的图片轮播功能,根据需要可以进行更改和扩展。