jquery 横向无缝滚动

基础概念

jQuery 横向无缝滚动是一种网页效果，通过使用 jQuery 库来实现元素在水平方向上的连续滚动，使得用户感觉内容是无限延伸的。这种效果常用于新闻滚动、图片轮播、广告展示等场景。

类型

纯 JavaScript 实现：通过定时器和 CSS3 动画实现。
jQuery 插件实现：使用现成的 jQuery 插件，如 jquery.marquee、jquery.smoothscroll 等。

应用场景

新闻滚动条
图片轮播
广告展示
社交媒体动态展示

示例代码

以下是一个使用 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>
        #marquee {
            width: 100%;
            overflow: hidden;
            position: relative;
        }
        #marquee ul {
            list-style: none;
            padding: 0;
            margin: 0;
            white-space: nowrap;
        }
        #marquee li {
            display: inline-block;
            padding: 10px;
        }
    </style>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <div id="marquee">
        <ul>
            <li>新闻1</li>
            <li>新闻2</li>
            <li>新闻3</li>
            <li>新闻4</li>
            <li>新闻5</li>
        </ul>
    </div>

    <script>
        $(document).ready(function() {
            var marquee = $('#marquee ul');
            var marqueeWidth = marquee.width();
            var containerWidth = $('#marquee').width();
            var speed = 50; // 滚动速度

            function scrollMarquee() {
                marquee.animate({ marginLeft: -marqueeWidth }, speed, 'linear', function() {
                    marquee.css('marginLeft', containerWidth);
                    scrollMarquee();
                });
            }

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

常见问题及解决方法

滚动不流畅：
- 原因：可能是由于浏览器性能问题或 JavaScript 执行效率低。
- 解决方法：优化代码，减少不必要的 DOM 操作，使用 CSS3 动画代替 JavaScript 动画。

滚动停止：
- 原因：可能是由于定时器被清除或浏览器进入后台。
- 解决方法：确保定时器在页面可见时正常运行，可以使用 setInterval 和 clearInterval 来管理定时器。
内容重叠：
- 原因：可能是由于 CSS 样式设置不当。
- 解决方法：检查并调整 CSS 样式，确保元素不会重叠。

通过以上方法，可以实现一个简单且流畅的 jQuery 横向无缝滚动效果。

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

有帮助

没帮助

滚动背景

、、

我正在尝试新的东西为一个简单的游戏在肖像模式，我想添加一个无缝滚动的背景到一个游戏，图像是512x512px。我想要的主要滚动是垂直的，但我希望能够在图像大小的范围内横向滚动。

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

2回答

如何使用Javascript检测bowser窗口何时横向滚动

、、

如何使用Javascript/Jquery在浏览器窗口中测试横向/水平滚动，然后在检测到移动时执行操作？

浏览 16提问于2018-08-15得票数 0

回答已采纳

1回答

Rails 3中的jQuery vTicker插件实现

、、、

我们使用jQuery vTicker插件在Rails应用程序的主页上滚动新闻提要。pause: 3000,animation: 'fade',height: 0,}) 我们希望在jQueryvTicker中显示来自数据库微帖表的微帖子，这些微帖子将显示在主页上的滚动vTicker提要中。我们如何实现这个jQuery插件，以及如何设置我们的Micropost类&#x

浏览 2提问于2012-02-05得票数 0

回答已采纳

1回答

在两页模式下如何实现可缩放的UIPageViewController？

、、、、

当只显示一个页面时，为每个页面使用滚动视图效果很好。但是，当两个页面在横向模式下并排显示时，如何在缩放动画期间无缝同步页面和对齐边界？一种可能的解决方案是将UIPageViewController放在一个更大的UIScrollView控制器中，但这会使模糊的图像变黄，因为当缩放父级图像时，页面内的两个滚动视图不会使用源图像的较高分辨率区域进行更新

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

2回答

无缝JQuery字幕/滚动条

、、

我发现一个用户在这里发布了一个无缝的jQuery字幕/滚动条的代码。我已经将它修改为在滚动到/滚动出时启动和停止，但一旦用户滚动出，它通常会滞后。它永远不会完全停止，但滚动的速度有时是其原始速度的1/10。我已经加快了速度，所以更容易看到它的滞后。无论如何，如果有人知道如何解决这个问题，我将不胜感激。jQuery var marquee = $("#scroller"

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

2回答

如何以web视图作为页面(子视图)制作一个无缝的滚动视图

、、、、

我想做一个无缝的scrollView滚动视图应该有网页视图作为它的子视图，并应无缝滚动现在我已经实现了只有3个页面的无缝滚动视图，但我希望but视图取代标签……

浏览 2提问于2012-02-03得票数 6

回答已采纳

1回答

在反向横向和纵向模式下检测方向

、、

我想要检测反向横向和纵向。配置不支持ORIENTATION_REVERSE_LANDSCAPE或ORIENTATION_REVERSE_PORTRAIT。

浏览 1提问于2013-04-15得票数 1

1回答

为什么我的图片库div与jQuery移动页面元素重叠？

、、

请查看：我使用的是jQuery手机，在纵向模式下一切正常，但在横向模式下，一切都会变得一团糟。如何才能使底部的图像滚动条div不会重叠？

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

2回答

jQuery鼠标滚轮水平移动

、、

在Javascript中，有没有办法检测鼠标滚轮是否横向滚动？我现在使用的是优秀的jquery.mousewhel.3.0.2插件，但我找不到任何与事件相关的参数。请帮帮我！

浏览 3提问于2010-02-16得票数 2

回答已采纳

4回答

有js功能可以左右滚动站点吗？

、

我想知道有没有人知道有没有javascript之类的东西，可以在点击的时候左右滚动网站。左上右下

浏览 1提问于2012-08-16得票数 0

3回答

基于鼠标位置的平滑滚动条(Jquery)

、、

我想创建一个基于鼠标位置的平滑滚动条。这个想法是创建一个具有固定宽度的外部div。内容非常宽，必须根据鼠标位置向左或向右滚动。如果内容是“无限的”或“无限的”，那就太好了。内容是一个非常宽的图像，“无缝地”重复。提前感谢！亚历克斯

浏览 1提问于2011-05-26得票数 4

1回答

jQuery滚动图像动画:向错误的方向移动

、

我是jQuery的新手，我正在尝试向下滚动和显示图像。我使用的代码成功地滚动了图像，但是是横向的，这不是我所需要的。

浏览 1提问于2015-06-06得票数 1

1回答

垂直滚动时水平滚动？

、、、

我知道这个话题在这里被问了很多，但我找不到任何最新的东西，据我所知，后来的jQuery版本不再支持这些函数。这是一个基本的设置，我现在有，它将只滚动如果横向滚动，而不是垂直和横向。

浏览 9提问于2019-07-23得票数 0

3回答

我已经看到了一个非常好的效果，我想尝试在我自己的项目中重现，但我正在努力寻找实现它的最佳方法，无论是在性能方面还是在无缝操作方面。其效果是连续/循环的内容，可以无休止地向任何方向滚动和平移，并且看起来完全无缝。这可以在安卓获奖的Leap:Second网站上看到：。假设用户连续向下滚动了5分钟，只是为了好玩，然后克隆了10,000次--克隆这么多内容有什么缺点？我看到的另一种方法是，当用户到达内容的末尾时，将滚动条重置回开头。background-image: url("")

浏览 1提问于2016-07-14得票数 5

1回答

在iOS 5中，UIScrollView会自动滚动任意数量

、、、

当应用程序旋转到横向时，将使用以下命令推送新视图：此横向视图包含一个在横向位置垂直滚动的滚动视图框架高度等于横向高度(320点)，并且滚动视图的内容大小高度是横向高度(SO960点)的3倍。我启用了垂直分页，所以有3页。当视图出现时，滚动视图会像我预期的那样滚动到顶部。但在iOS

浏览 5提问于2013-02-16得票数 0

回答已采纳

4回答

iPad上的Webkit溢出滚动触摸CSS bug

、、、

左边的灰色区域有很多内容，可以在纵向或横向滚动。右侧将仅在横向滚动。如何阻止这种情况的发生是显而易见的，但我并不总是有足够的内容来填充这个区域。提前谢谢你，将

浏览 2提问于2012-02-01得票数 23

回答已采纳

2回答

无缝滚动文本

、、

我正在尝试实现类似于新闻报价器的东西，除了我不知道正在滚动的文本的大小。文本的结尾必须紧跟文本的开头(换行)。我目前的解决方案包括复制文本，使其看起来无限，但我在使其看起来无缝方面存在问题。有没有办法让这一切变得无缝呢？我不希望必须一直将字符串附加到它自身，并允许它永远向左滚动。

浏览 5提问于2015-10-19得票数 3

1回答

jQuery添加/删除DOM元素:滚动条问题

、、、

我编写了一个jQuery函数，用于在DOM中动态添加或删除消息框。根据站点的内容和消息框的数量，浏览器滚动条会出现。有时，只有一个消息框的出现才会导致滚动条。当此框被移除时，滚动条消失，整个站点横向跳跃几个像素。有没有办法解决这个问题？我已经在body上试用过overflow: hidden了。这当然是可行的，但也是没有意义的，因为这样你就不能滚动网站的内容。

浏览 6提问于2012-02-29得票数 0

回答已采纳

1回答

使用jQuery横向插入滚动按钮

、、、

我正在尝试将这个复制到我自己的中。另一个问题是，当重新加载时，尽管我已经在$('.nav-item').last().offset().left中加载了reAdjust()函数，但有时在行$( document ).ready(function()上会出现错误。

浏览 6提问于2022-04-29得票数 -1

回答已采纳

6回答

双向无限滚动-向上和向下

、、、

我试图创建一个页面，这是一个无休止的滚动循环，向上和向下。问题似乎是，即使内容定位在页面的负垂直空间中，滚动也不会延伸到该空间。我想过使用javascript来禁用滚动，并使用scroll事件来重新定位元素，但是页面上已经发生了很多绝对定位的元素和动画，所以我很关心采用这种方法的性能。还有其他线索吗？

浏览 6提问于2012-05-13得票数 19

回答已采纳

点击加载更多