js实现左右滚动效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>左右滚动效果</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="scroll-container">
        <div class="scroll-content">
            <div class="item">内容1</div>
            <div class="item">内容2</div>
            <div class="item">内容3</div>
            <div class="item">内容4</div>
        </div>
    </div>
    <button id="scrollLeft">向左滚动</button>
    <button id="scrollRight">向右滚动</button>
    <script src="script.js"></script>
</body>
</html>

/* styles.css */
body {
    font-family: Arial, sans-serif;
}

.scroll-container {
    width: 80%;
    overflow: hidden;
    border: 1px solid #ccc;
    margin: 20px auto;
}

.scroll-content {
    display: flex;
    transition: transform 0.5s ease-in-out;
}

.item {
    min-width: 200px;
    height: 100px;
    background-color: #f0f0f0;
    margin-right: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

// script.js
document.addEventListener('DOMContentLoaded', () => {
    const scrollContent = document.querySelector('.scroll-content');
    const scrollLeftBtn = document.getElementById('scrollLeft');
    const scrollRightBtn = document.getElementById('scrollRight');

    let scrollPosition = 0;
    const itemWidth = document.querySelector('.item').offsetWidth + 10; // 包括间距

    scrollLeftBtn.addEventListener('click', () => {
        scrollPosition += itemWidth;
        if (scrollPosition > 0) {
            scrollPosition = 0;
        }
        scrollContent.style.transform = `translateX(${scrollPosition}px)`;
    });

    scrollRightBtn.addEventListener('click', () => {
        const maxScroll = -(scrollContent.children.length - 1) * itemWidth;
        scrollPosition -= itemWidth;
        if (scrollPosition < maxScroll) {
            scrollPosition = maxScroll;
        }
        scrollContent.style.transform = `translateX(${scrollPosition}px)`;
    });
});