一个html四个图片左右轮播代码
时间: 2024-03-16 17:44:44 浏览: 26
以下是一个 HTML 四个图片左右轮播的基本代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>四个图片左右轮播</title>
<style>
.container {
display: flex;
overflow: hidden;
width: 400px;
margin: 0 auto;
}
.carousel {
display: flex;
width: 1600px;
transition: transform 0.5s ease-in-out;
}
.carousel-item {
flex-shrink: 0;
width: 400px;
height: 300px;
}
.carousel-item img {
width: 100%;
height: 100%;
object-fit: cover;
}
.prev,
.next {
display: flex;
align-items: center;
justify-content: center;
width: 50px;
height: 50px;
background-color: #ddd;
position: absolute;
top: calc(50% - 25px);
}
.prev:hover,
.next:hover {
cursor: pointer;
}
.prev {
left: 10px;
}
.next {
right: 10px;
}
</style>
</head>
<body>
<div class="container">
<div class="carousel">
<div class="carousel-item">
<img src="img_1.jpg" alt="图片1" />
</div>
<div class="carousel-item">
<img src="img_2.jpg" alt="图片2" />
</div>
<div class="carousel-item">
<img src="img_3.jpg" alt="图片3" />
</div>
<div class="carousel-item">
<img src="img_4.jpg" alt="图片4" />
</div>
</div>
<div class="prev"><</div>
<div class="next">></div>
</div>
<script>
const carousel = document.querySelector(".carousel");
const prev = document.querySelector(".prev");
const next = document.querySelector(".next");
let direction = 1; // 1 表示向右,-1 表示向左
let currentIndex = 0;
function slide() {
currentIndex += direction;
if (currentIndex < 0) {
currentIndex = 3;
} else if (currentIndex > 3) {
currentIndex = 0;
}
carousel.style.transform = `translateX(-${currentIndex * 400}px)`;
}
prev.addEventListener("click", () => {
direction = -1;
slide();
});
next.addEventListener("click", () => {
direction = 1;
slide();
});
</script>
</body>
</html>
```
这个代码定义了一个包含四张图片的轮播,使用了 flex 布局和 JavaScript 来实现左右切换。容器使用了 CSS 类名 `.container`,并设置了宽度、居中和 overflow:hidden 属性,以隐藏溢出的部分。轮播元素使用了 CSS 类名 `.carousel`,并设置了宽度和过渡动画属性,以实现平滑的图片切换效果。每张图片使用了 CSS 类名 `.carousel-item`,并设置了宽高和图片缩放适配属性。左右切换箭头使用了 CSS 类名 `.prev` 和 `.next`,并设置了样式和位置属性。JavaScript 部分实现了轮播的切换逻辑,使用了 transform 属性来实现图片的位移。