jquery图片上下滚动效果

基础概念

jQuery 图片上下滚动效果是一种常见的网页动态效果，通过使用 jQuery 库来实现图片在页面上垂直方向的滚动展示。这种效果可以增强页面的视觉吸引力，提升用户体验。

类型

定时滚动：按照设定的时间间隔自动滚动图片。
鼠标悬停停止滚动：当鼠标悬停在滚动区域时，滚动效果暂停，鼠标移开后继续滚动。
手动控制滚动：通过按钮或其他交互元素手动控制图片的滚动。

应用场景

新闻轮播：在新闻网站中展示最新的新闻图片。
产品展示：在电商网站中展示产品图片。
广告展示：在广告位展示多个广告图片。

示例代码

以下是一个简单的 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>
        #scroll-container {
            width: 300px;
            height: 200px;
            overflow: hidden;
            border: 1px solid #ccc;
        }
        #scroll-container img {
            width: 100%;
            height: auto;
        }
    </style>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <div id="scroll-container">
        <img src="image1.jpg" alt="Image 1">
        <img src="image2.jpg" alt="Image 2">
        <img src="image3.jpg" alt="Image 3">
    </div>

    <script>
        $(document).ready(function() {
            var $container = $('#scroll-container');
            var $images = $container.find('img');
            var totalHeight = 0;

            $images.each(function() {
                totalHeight += $(this).outerHeight();
            });

            $container.css('height', totalHeight + 'px');

            function scrollImages() {
                $container.animate({ scrollTop: totalHeight }, 5000, function() {
                    $container.css('scrollTop', 0);
                    scrollImages();
                });
            }

            scrollImages();

            $container.hover(function() {
                $(this).stop();
            }, function() {
                scrollImages();
            });
        });
    </script>
</body>
</html>