jquery 图片上下滑动

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: 300px;
            height: 200px;
            overflow: hidden;
            position: relative;
        }
        #slider img {
            width: 100%;
            height: auto;
            position: absolute;
            transition: top 0.5s ease-in-out;
        }
    </style>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <div id="slider">
        <img src="image1.jpg" alt="Image 1" id="slideImage">
    </div>
    <button id="prev">上一张</button>
    <button id="next">下一张</button>

    <script>
        $(document).ready(function() {
            var images = ["image1.jpg", "image2.jpg", "image3.jpg"];
            var currentIndex = 0;

            function showImage(index) {
                $("#slideImage").attr("src", images[index]);
                $("#slideImage").css("top", "0");
            }

            $("#prev").click(function() {
                currentIndex = (currentIndex - 1 + images.length) % images.length;
                $("#slideImage").css("top", "-200px");
                setTimeout(function() {
                    showImage(currentIndex);
                }, 500);
            });

            $("#next").click(function() {
                currentIndex = (currentIndex + 1) % images.length;
                $("#slideImage").css("top", "200px");
                setTimeout(function() {
                    showImage(currentIndex);
                }, 500);
            });

            // 初始显示第一张图片
            showImage(currentIndex);
        });
    </script>
</body>
</html>