html生成一个带有四张图片的横向轮播图
时间: 2023-08-01 15:10:48 浏览: 51
好的,以下是一个简单的 HTML 横向轮播图示例,其中包含四张图片:
```html
<!DOCTYPE html>
<html>
<head>
<title>横向轮播图</title>
<style>
.container {
display: flex;
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
width: 100%;
height: 300px;
}
.item {
flex-shrink: 0;
width: 100%;
height: 100%;
scroll-snap-align: start;
}
img {
width: 100%;
height: 100%;
object-fit: cover;
}
</style>
</head>
<body>
<div class="container">
<div class="item">
<img src="https://via.placeholder.com/300x300/FFA07A/FFFFFF?text=Image+1" alt="Image 1">
</div>
<div class="item">
<img src="https://via.placeholder.com/300x300/87CEEB/FFFFFF?text=Image+2" alt="Image 2">
</div>
<div class="item">
<img src="https://via.placeholder.com/300x300/FFC0CB/FFFFFF?text=Image+3" alt="Image 3">
</div>
<div class="item">
<img src="https://via.placeholder.com/300x300/90EE90/FFFFFF?text=Image+4" alt="Image 4">
</div>
</div>
<script>
let container = document.querySelector('.container');
let items = document.querySelectorAll('.item');
let scroll = 0;
let interval = setInterval(() => {
scroll += container.offsetWidth;
container.scrollTo({
left: scroll,
behavior: 'smooth'
});
if (scroll >= items[items.length - 1].offsetLeft) {
scroll = 0;
}
}, 3000);
</script>
</body>
</html>
```
这里使用了 Flexbox 和 Scroll Snap API 来实现横向滚动,JavaScript 控制图片的自动轮播。您可以将图片链接替换成自己的图片链接即可。