要实现左右滚动的图片，可以使用HTML结合CSS和JavaScript来创建。以下是一个简单的例子：
HTML:
<div class="gallery-wrapper">
<div class="gallery">
<img src="image1.jpg" alt="Image 1">
<img src="image2.jpg" alt="Image 2">
<img src="image3.jpg" alt="Image 3">
<!-- 更多图片 -->
</div>
</div>
<button id="prev">Previous</button>
<button id="next">Next</button>
CSS:
.gallery-wrapper {
overflow-x: auto; /* 使容器可滚动 */
white-space: nowrap; /* 防止图片换行 */
}
.gallery img {
display: inline; /* 让图片并排显示 */
margin-right: 10px; /* 图片之间的间隔 */
}
JavaScript:
const gallery = document.querySelector('.gallery');
const prevBtn = document.getElementById('prev');
const nextBtn = document.getElementById('next');
function scrollGallery(direction) {
const scrollAmount = 200; // 每次滚动的像素数量
gallery.scrollBy({
left: direction * scrollAmount,
behavior: 'smooth'
});
}
prevBtn.addEventListener('click', () => scrollGallery(-1));
nextBtn.addEventListener('click', () => scrollGallery(1));
这段代码实现了一个简单的左右滚动图库。点击"Previous"按钮会向左滚动，点击"Next"按钮会向右滚动。每次滚动的距离可以通过调整scrollAmount变量来控制。