用hbuilder写一个五张图轮播的html代码
时间: 2023-05-11 21:07:29 浏览: 244
以下是一个使用 HBuilder 编写的五张图轮播的 HTML 代码:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>五张图轮播</title>
<style>
#slider {
width: 600px;
height: 400px;
margin: 0 auto;
position: relative;
overflow: hidden;
}
#slider img {
width: 600px;
height: 400px;
position: absolute;
top: 0;
left: 0;
display: none;
}
#slider img:first-child {
display: block;
}
#slider .prev, #slider .next {
position: absolute;
top: 50%;
margin-top: -20px;
width: 40px;
height: 40px;
background-color: #333;
color: #fff;
text-align: center;
line-height: 40px;
cursor: pointer;
opacity: 0.5;
transition: opacity 0.3s ease-in-out;
}
#slider .prev:hover, #slider .next:hover {
opacity: 1;
}
#slider .prev {
left: 0;
}
#slider .next {
right: 0;
}
</style>
</head>
<body>
<div id="slider">
<img src="img/1.jpg" alt="1">
<img src="img/2.jpg" alt="2">
<img src="img/3.jpg" alt="3">
<img src="img/4.jpg" alt="4">
<img src="img/5.jpg" alt="5">
<div class="prev">❮</div>
<div class="next">❯</div>
</div>
<script>
var slider = document.getElementById("slider");
var prev = slider.querySelector(".prev");
var next = slider.querySelector(".next");
var imgs = slider.querySelectorAll("img");
var index = 0;
var len = imgs.length;
var timer = null;
function showImg() {
imgs[index].style.display = "block";
for (var i = 0; i < len; i++) {
if (i !== index) {
imgs[i].style.display = "none";
}
}
}
function autoPlay() {
timer = setInterval(function() {
index++;
if (index === len) {
index = 0;
}
showImg();
}, 2000);
}
autoPlay();
prev.onclick = function() {
index--;
if (index < 0) {
index = len - 1;
}
showImg();
};
next.onclick = function() {
index++;
if (index === len) {
index = 0;
}
showImg();
};
</script>
</body>
</html>
```
这个代码使用了 HTML、CSS 和 JavaScript,实现了一个基本的五张图轮播效果。其中,`<img>` 标签用于显示图片,`.prev` 和 `.next` 类用于控制上一张和下一张图片的显示,JavaScript 代码用于实现自动播放和手动切换图片。