js点击控制图片左右滚动滚动条

<div class="image-container">
    <button id="scrollLeft">向左滚动</button>
    <div class="image-wrapper">
        <img src="image1.jpg" alt="Image 1">
        <img src="image2.jpg" alt="Image 2">
        <img src="image3.jpg" alt="Image 3">
        <!-- 更多图片 -->
    </div>
    <button id="scrollRight">向右滚动</button>
</div>

.image-container {
    width: 80%;
    overflow: hidden;
    position: relative;
}

.image-wrapper {
    display: flex;
    transition: transform 0.5s ease-in-out;
}

.image-wrapper img {
    width: 100%;
    flex-shrink: 0;
}

document.addEventListener('DOMContentLoaded', function() {
    const imageWrapper = document.querySelector('.image-wrapper');
    const scrollLeftBtn = document.getElementById('scrollLeft');
    const scrollRightBtn = document.getElementById('scrollRight');
    const scrollAmount = 100; // 每次滚动的像素数

    scrollLeftBtn.addEventListener('click', function() {
        imageWrapper.scrollBy({
            left: -scrollAmount,
            behavior: 'smooth'
        });
    });

    scrollRightBtn.addEventListener('click', function() {
        imageWrapper.scrollBy({
            left: scrollAmount,
            behavior: 'smooth'
        });
    });
});