jquery点击按钮左右图片滚动效果代码

要实现一个使用jQuery的点击按钮左右滚动图片的效果，你可以按照以下步骤进行：

基础概念

这个效果主要涉及到HTML结构、CSS样式和jQuery脚本的使用。HTML用于构建页面结构，CSS用于美化页面并设置动画效果，而jQuery则用于处理用户的点击事件并控制图片的滚动。

类型

水平滚动：图片在水平方向上滚动。
垂直滚动：图片在垂直方向上滚动。

应用场景

图片轮播图
广告展示
产品展示

示例代码

HTML

<!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">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <div class="image-container">
        <button id="left-btn">左</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="right-btn">右</button>
    </div>
    <script src="script.js"></script>
</body>
</html>

CSS (styles.css)

.image-container {
    width: 80%;
    margin: 0 auto;
    overflow: hidden;
}

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

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

jQuery (script.js)

$(document).ready(function() {
    let currentPosition = 0;
    const imageCount = $('.image-wrapper img').length;
    const containerWidth = $('.image-container').width();

    $('#left-btn').click(function() {
        if (currentPosition > 0) {
            currentPosition--;
            $('.image-wrapper').css('transform', `translateX(-${currentPosition * containerWidth}px)`);
        }
    });

    $('#right-btn').click(function() {
        if (currentPosition < imageCount - 1) {
            currentPosition++;
            $('.image-wrapper').css('transform', `translateX(-${currentPosition * containerWidth}px)`);
        }
    });
});