jquery 两行图片左右滑动效果

基础概念

jQuery 是一个快速、小巧且功能丰富的 JavaScript 库，它简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互。两行图片左右滑动效果通常是指在一个容器内，通过滑动手势或点击按钮，实现图片在水平方向上的滑动切换。

类型

手势滑动：通过监听触摸事件实现滑动效果。
按钮控制：通过点击按钮来触发图片的滑动切换。

应用场景

图片轮播：在网站首页或产品展示页中，通过滑动切换不同的图片。
相册浏览：在图片相册应用中，通过滑动来浏览不同的图片。

示例代码（手势滑动）

以下是一个简单的 jQuery 实现手势滑动的示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery 图片滑动效果</title>
    <style>
        #slider {
            width: 100%;
            overflow: hidden;
            position: relative;
        }
        .slide {
            width: 100%;
            display: inline-block;
        }
        img {
            width: 100%;
            height: auto;
        }
    </style>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <div id="slider">
        <div class="slide"><img src="image1.jpg" alt="Image 1"></div>
        <div class="slide"><img src="image2.jpg" alt="Image 2"></div>
        <div class="slide"><img src="image3.jpg" alt="Image 3"></div>
    </div>

    <script>
        $(document).ready(function() {
            let startX, endX, currentSlide = 0;
            const slideWidth = $('#slider .slide').width();
            const totalSlides = $('#slider .slide').length;

            $('#slider').on('touchstart', function(event) {
                startX = event.originalEvent.touches[0].clientX;
            });

            $('#slider').on('touchmove', function(event) {
                event.preventDefault();
                endX = event.originalEvent.touches[0].clientX;
            });

            $('#slider').on('touchend', function() {
                const diff = startX - endX;
                if (diff > 50) {
                    // Swipe left
                    currentSlide = (currentSlide + 1) % totalSlides;
                } else if (diff < -50) {
                    // Swipe right
                    currentSlide = (currentSlide - 1 + totalSlides) % totalSlides;
                }
                $('#slider').css('transform', `translateX(-${currentSlide * slideWidth}px)`);
            });
        });
    </script>
</body>
</html>