html五张一排图片滚动轮播
时间: 2023-12-25 17:29:39 浏览: 47
以下是一个使用HTML和CSS实现的五张一排图片滚动轮播的示例:
```html
<!DOCTYPE html>
<html>
<head>
<style>
.container {
width: 100%;
overflow: hidden;
}
.slider {
display: flex;
animation: slide 10s infinite;
}
.slide {
flex: 0 0 20%;
margin-right: 10px;
}
@keyframes slide {
0% { transform: translateX(0); }
20% { transform: translateX(-25%); }
40% { transform: translateX(-50%); }
60% { transform: translateX(-75%); }
80% { transform: translateX(-100%); }
100% { transform: translateX(0); }
}
</style>
</head>
<body>
<div class="container">
<div class="slider">
<div class="slide">
<img src="image1.jpg" alt="Image 1">
</div>
<div class="slide">
<img src="image2.jpg" alt="Image 2">
</div>
<div class="slide">
<img src="image3.jpg" alt="Image 3">
</div>
<div class="slide">
<img src="image4.jpg" alt="Image 4">
</div>
<div class="slide">
<img src="image5.jpg" alt="Image 5">
</div>
</div>
</div>
</body>
</html>
```
这段代码创建了一个容器(`<div class="container">`),其中包含一个滑动器(`<div class="slider">`)。滑动器中包含了五个滑块(`<div class="slide">`),每个滑块都包含一张图片。通过CSS的`animation`属性和`@keyframes`规则,我们实现了滑动效果。每个滑块的宽度设置为20%,并且通过`margin-right`属性设置了滑块之间的间距。
你可以将`image1.jpg`、`image2.jpg`等图片替换为你自己的图片路径。此外,你还可以根据需要调整滑动器的宽度、滑块之间的间距以及滑动的速度。