要实现带按钮的图片无缝滚动效果，你可以使用jQuery。下面是一个简单的示例，演示如何使用HTML、CSS和jQuery来创建这种效果。

HTML结构：

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
    <div class="image-container">
        <ul class="image-list">
            <li><img src="image1.jpg" alt="Image 1"></li>
            <li><img src="image2.jpg" alt="Image 2"></li>
            <li><img src="image3.jpg" alt="Image 3"></li>
            <li><img src="image4.jpg" alt="Image 4"></li>
        </ul>
        <button id="prev">Previous</button>
        <button id="next">Next</button>
    </div>
</body>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="script.js"></script>
</html>

CSS样式（styles.css）：

.image-container {
    position: relative;
    width: 400px;
    overflow: hidden;
}

.image-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
}

.image-list li {
    width: 400px;
    height: 200px;
}

button {
    margin-top: 10px;
}

jQuery脚本（script.js）：

$(document).ready(function() {
    const $imageList = $('.image-list');
    const $images = $imageList.find('li');
    const imageWidth = $images.first().width();
    const totalImages = $images.length;
    let currentIndex = 0;

    // 按钮点击事件 - 下一个
    $('#next').on('click', function() {
        moveNext();
    });

    // 按钮点击事件 - 上一个
    $('#prev').on('click', function() {
        movePrev();
    });

    function moveNext() {
        currentIndex = (currentIndex + 1) % totalImages;
        updateImageList();
    }

    function movePrev() {
        currentIndex = (currentIndex - 1 + totalImages) % totalImages;
        updateImageList();
    }

    function updateImageList() {
        const offset = -currentIndex * imageWidth;
        $imageList.animate({ left: offset }, 500);
    }
});

这个示例创建了一个带有"Previous"和"Next"按钮的图片滚动效果。当点击这些按钮时，它会无缝滚动到下一张或上一张图片。你可以根据需要自定义图片、容器尺寸和按钮样式。确保将图片文件路径替换为实际的图片文件路径。

版权属于：泽泽社长
本文链接：https://blog.zezeshe.com/archives/with-buttons.html
本站未注明转载的文章均为原创，并采用 CC BY-NC-SA 4.0 授权协议，转载请注明来源，谢谢！