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: 100%;
            overflow: hidden;
            position: relative;
        }
        #scroll-content {
            white-space: nowrap;
            position: absolute;
        }
        .scroll-item {
            display: inline-block;
            margin-right: 10px;
        }
    </style>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <div id="scroll-container">
        <div id="scroll-content">
            <img class="scroll-item" src="image1.jpg" alt="Image 1">
            <img class="scroll-item" src="image2.jpg" alt="Image 2">
            <img class="scroll-item" src="image3.jpg" alt="Image 3">
        </div>
    </div>

    <script>
        $(document).ready(function() {
            function scrollImages() {
                var container = $('#scroll-container');
                var content = $('#scroll-content');
                var itemWidth = $('.scroll-item').outerWidth(true);
                var containerWidth = container.width();
                var scrollSpeed = 2; // 滚动速度

                content.animate({
                    marginLeft: -itemWidth
                }, scrollSpeed * 1000, function() {
                    content.css('marginLeft', containerWidth);
                    scrollImages();
                });
            }

            scrollImages();
        });
    </script>
</body>
</html>

常见问题及解决方法

图片滚动不连续：
- 原因：可能是由于动画时间设置不当或回调函数未正确执行。
- 解决方法：确保动画时间和回调函数设置正确，如示例代码所示。

图片滚动方向不正确：
- 原因：可能是由于 marginLeft 或 marginTop 设置错误。
- 解决方法：检查并调整 marginLeft 或 marginTop 的值，确保滚动方向正确。
图片滚动速度过快或过慢：
- 原因：可能是由于滚动速度设置不当。
- 解决方法：调整 scrollSpeed 的值，以达到期望的滚动速度。

通过以上示例代码和解决方法，可以实现一个简单的 jQuery 图片连续滚动效果，并解决常见的滚动问题。

页面内容是否对你有帮助？

有帮助

没帮助

ASP.NET转发器加载图像

、

在我的应用程序中，我使用了中继器control.For，我已经在time.But加载了项目，我的客户端想要显示前6个项目，然后如果用户来到页面末尾，它将显示一个名为加载图像的图像，并在短时间后显示另外6个项目，用户再次来到页面末尾，它将在屏幕末尾显示加载图像，并加载另外6个类似的项目，依此类推。例如:Facebook加载

浏览 0提问于2011-09-27得票数 1

回答已采纳

1回答

具有一行图像的flex框

、、、、

我正在使用一个引导程序面板来连续显示三个图像。假设我总共有六张图片，我想要连续显示三张图片，当我移动滚动条时，接下来的三张图片应该会一个接一个地出现。为了应用滚动条，我使用了overflow-x:visible，但是屏幕上什么都没有。当屏幕上同时显示三个图像时，我应该怎么做才能使图像可以水平滚动？

浏览 8提问于2017-06-29得票数 1

回答已采纳

2回答

Chrome和IE:使用鼠标轮滚动时视差(jQuery动画)不光滑

、、、

我为jQuery修改了jQuery插件，在我的网站上使用视差效果。问题是(即使在上面链接的演示中) Chrome和IE有一个非常不光滑的滚动。它只有当你按鼠标的中间按钮，滚动是连续的(而不是“一步一步”，当你滚动鼠标轮)。所以当你用鼠标滚轮滚动时，视差效果就完全被破坏了。相反，在Firefox中，滚动是连续的，即使用鼠标轮滚动也是如此。在IE和Chrome中是否也有连续滚动的方法(

浏览 2提问于2013-09-01得票数 8

回答已采纳

1回答

循环查看项目从第一次加载改为

、

最近，我遇到了一个项目，它需要一个与菜单列表相链接的连续列表。类似于：图片2--图片图片4-图片因此，左侧侧菜单控制右大小视图，右侧侧视图是一个连续列表。右侧的也可从PIC 1滚动到PIC 2信息，当滚动传递 PIC 1<code>E 221</code>时，应在<>E 1

浏览 0提问于2021-11-20得票数 0

1回答

更改默认滚动条行为

、、、、

有没有办法改变滚动条的默认行为，从一次移动一个像素(连续运动)，到跳跃，比方说一次100px (少连续多离散跳转)。我有一个在图片之间跳转的动画，我想使用滚动条一次显示一张图片。每当我尝试改变滚动条的行为时，它要么跳来跳去，要么做一些奇怪的事情。顺便说一下，我是在滚动条，而不是用箭头来移动它。这样，我可以手动使动画更快或更慢。

浏览 1提问于2010-08-25得票数 1

回答已采纳

2回答

是否继续图像的滚动效果？

、、、

我想在连续滚动模式下滚动我的10个图像，就像在这个flash文件中演示的那样：我谷歌了很多次，但没有找到脚本或插件，它可以连续滚动我的图像，并在鼠标移出/悬停时启动/停止。谢谢

浏览 0提问于2010-01-17得票数 2

回答已采纳

1回答

jQuery SmoothDivScroll -没有autoScroll的连续滚动？

、、

我正在使用jQuery SmoothDivScroll插件。我想有连续滚动，但手动滚动，而不是自动滚动。这可以做到吗？谢谢

浏览 2提问于2011-05-31得票数 0

回答已采纳

4回答

可以将滚动条捆绑在一起吗？

、、、

我试图在一个被黑线分隔的模式中打开两个图像，每个单独的窗口都有一个滚动条，overflow被设置为滚动。我想要它是这样的，当你比较溢出的图像时，滚动条相互系住或绑定在一起，这样当你在一个窗口上滚动时，它就会在另一个窗口上滚动。

浏览 3提问于2012-08-09得票数 3

回答已采纳

2回答

在DataTables中保持滚动条可见

、

使用JQuery的DataTables插件创建滚动表格时，在用户将焦点放到表格之前，滚动条在设计上是不可见的。我希望滚动条连续可见，因为它让用户知道他们实际上可以滚动。

浏览 2提问于2014-08-22得票数 1

1回答

jQuery垂直标线

、、、

我正在寻找一个连续滚动的大块(不是HTML元素！)它类似于，但却垂直向下滚动。这类动画已经有jQuery插件了吗？

浏览 2提问于2011-10-07得票数 4

回答已采纳

3回答

是否在jQuery中连续滚动包含图像的水平滚动条？

、、、、

(欢迎使用jQuery解决方案。)

浏览 0提问于2009-08-18得票数 19

回答已采纳

1回答

jQuery div自动机解

、、

我需要一个jQuery滚动滚筒滚动我的div与自动滚动设施。我在找像这样的东西。但这是有局限性的。我想要的是一个；它是文本和图像的结合。3.滑块应该是连续的品牌，不应该倒带到开始。我不想这样，并希望自动滚动内容在一个循环中顺利。也就是说，在循环循环中，第一个内容应该

浏览 2提问于2012-04-04得票数 1

回答已采纳

3回答

如何让图像永远滚动

、、、

我正在尝试让图像自动滚动到屏幕的末尾，然后跳回图像的开头，并在连续循环中再次滚动。我不想让用户知道图片的结尾已经发布了？有人知道怎么做吗？图像必须自己滚动，而不是因为用户触摸了它，这就是我不能使用WWDC视频的原因。谢谢你的帮助！

浏览 1提问于2011-07-22得票数 0

回答已采纳

2回答

仅加载DOM的可见部分，并删除视口中不可见的DOM元素

、、

我正在创建一个应用程序，当向下滚动时，新内容会加载到div中(使用AJAX)，这允许用户以连续模式(没有导航)阅读整个内容。但是，问题是，由于整个内容非常巨大，连续滚动将整个内容增量地加载到DOM中，这使得浏览器非常慢。有没有可能使用javascript/jQuery删除视窗中不可见的DOM元素，并在用户向上滚动时重新加载？

浏览 1提问于2011-06-19得票数 5

4回答