<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图片左右滚动示例</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<style>
#product-gallery {
overflow: hidden;
white-space: nowrap;
position: relative;
}
.product-image {
display: inline-block;
margin-right: 20px;
width: 200px; /* 根据实际情况调整图片宽度 */
height: 200px; /* 根据实际情况调整图片高度 */
object-fit: cover;
}
#scroll-left, #scroll-right {
position: absolute;
top: 50%;
transform: translateY(-50%);
cursor: pointer;
z-index: 10;
user-select: none;
}
#scroll-left {
left: 10px;
}
#scroll-right {
right: 10px;
}
</style>
</head>
<body>
<div id="scroll-left"><</div>
<div id="product-gallery">
<img class="product-image" src="path/to/image1.jpg" alt="Product 1">
<img class="product-image" src="path/to/image2.jpg" alt="Product 2">
<img class="product-image" src="path/to/image3.jpg" alt="Product 3">
<!-- 更多图片 -->
</div>
<div id="scroll-right">></div>
<script>
$(document).ready(function() {
var gallery = $('#product-gallery');
var imageWidth = $('.product-image').outerWidth(true); // 包括margin
var maxScroll = gallery[0].scrollWidth - gallery.outerWidth();
$('#scroll-left').click(function() {
if (gallery.scrollLeft() > 0) {
gallery.animate({ scrollLeft: gallery.scrollLeft() - imageWidth }, 300);
}
});
$('#scroll-right').click(function() {
if (gallery.scrollLeft() < maxScroll) {
gallery.animate({ scrollLeft: gallery.scrollLeft() + imageWidth }, 300);
}
});
});
</script>
</body>
</html>
这段代码实现了一个简单的图片左右滚动功能。页面中包含了一个图片画廊（`#product-gallery`），图片横向排列。左右两侧分别有两个按钮（`#scroll-left` 和 `#scroll-right`），点击它们可以分别向左或向右滚动图片。
请注意，图片的路径（`src="path/to/imageX.jpg"`）需要根据实际情况进行替换。同时，`.product-image` 的 `width` 和 `height` 也应根据你的具体需求进行调整。
这个实现方式使用了 jQuery 的 `animate()` 方法来平滑滚动图片，并且通过计算 `maxScroll` 来确保滚动不会超出图片的边界。