实现轮播图的html代码
时间: 2023-09-04 07:16:29 浏览: 42
以下是一个简单的实现轮播图的 HTML 代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>轮播图</title>
<style>
.container {
position: relative;
width: 600px;
height: 400px;
margin: 0 auto;
overflow: hidden;
}
.img {
position: absolute;
top: 0;
left: 0;
width: 600px;
height: 400px;
opacity: 0;
transition: opacity 1s;
}
.img.active {
opacity: 1;
}
.btn {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 1;
cursor: pointer;
}
.btn.prev {
left: 20px;
}
.btn.next {
right: 20px;
}
</style>
</head>
<body>
<div class="container">
<img class="img active" src="image1.jpg">
<img class="img" src="image2.jpg">
<img class="img" src="image3.jpg">
<img class="img" src="image4.jpg">
<img class="img" src="image5.jpg">
<div class="btn prev">Prev</div>
<div class="btn next">Next</div>
</div>
<script>
var imgs = document.getElementsByClassName("img");
var prevBtn = document.getElementsByClassName("prev")[0];
var nextBtn = document.getElementsByClassName("next")[0];
var index = 0;
function showImg() {
for (var i = 0; i < imgs.length; i++) {
imgs[i].classList.remove("active");
}
imgs[index].classList.add("active");
}
prevBtn.onclick = function() {
index--;
if (index < 0) {
index = imgs.length - 1;
}
showImg();
}
nextBtn.onclick = function() {
index++;
if (index >= imgs.length) {
index = 0;
}
showImg();
}
setInterval(function() {
nextBtn.click();
}, 3000);
</script>
</body>
</html>
```
这段代码实现了一个基本的轮播图,包括容器、图片、上一个、下一个按钮、以及 JavaScript 代码实现轮播功能。在 JavaScript 中,通过设置 img 元素的 class 属性,控制图片的显示和隐藏,通过 setInterval() 函数实现自动轮播。