jquery 图片左右移动

基础概念

jQuery 是一个快速、小巧且功能丰富的 JavaScript 库，它简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互。图片左右移动通常是指通过 jQuery 实现图片在页面上的水平滑动效果。

类型

滑动效果：通过 jQuery 的 animate() 方法实现图片的水平滑动。
轮播效果：结合定时器和滑动效果，实现图片的自动轮播。

应用场景

图片展示：在产品展示、画廊等页面中，通过图片左右移动来展示更多内容。
广告轮播：在网站首页或广告位，通过图片轮播吸引用户注意力。

示例代码

以下是一个简单的 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>
        #image-container {
            width: 500px;
            overflow: hidden;
            position: relative;
        }
        #image-container img {
            width: 100%;
            position: absolute;
            transition: left 0.5s ease-in-out;
        }
    </style>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <div id="image-container">
        <img src="image1.jpg" alt="Image 1">
        <img src="image2.jpg" alt="Image 2">
        <img src="image3.jpg" alt="Image 3">
    </div>
    <button id="move-left">向左移动</button>
    <button id="move-right">向右移动</button>

    <script>
        $(document).ready(function() {
            var container = $('#image-container');
            var images = container.find('img');
            var imageWidth = images.first().width();
            var currentIndex = 0;

            function moveToNextImage() {
                currentIndex++;
                if (currentIndex >= images.length) {
                    currentIndex = 0;
                    images.eq(currentIndex).css('left', '0');
                }
                container.animate({ 'left': -currentIndex * imageWidth }, 500);
            }

            function moveToPrevImage() {
                currentIndex--;
                if (currentIndex < 0) {
                    currentIndex = images.length - 1;
                    container.css('left', -currentIndex * imageWidth);
                }
                container.animate({ 'left': -currentIndex * imageWidth }, 500);
            }

            $('#move-left').click(moveToPrevImage);
            $('#move-right').click(moveToNextImage);
        });
    </script>
</body>
</html>