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 News Scrolling</title>
    <style>
        #news-container {
            width: 600px;
            overflow: hidden;
            position: relative;
        }
        #news-container .news-item {
            width: 200px;
            float: left;
            padding: 10px;
            border: 1px solid #ccc;
        }
    </style>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <div id="news-container">
        <div class="news-item">News Item 1</div>
        <div class="news-item">News Item 2</div>
        <div class="news-item">News Item 3</div>
        <div class="news-item">News Item 4</div>
    </div>
    <button id="scroll-left">Scroll Left</button>
    <button id="scroll-right">Scroll Right</button>

    <script>
        $(document).ready(function() {
            var container = $('#news-container');
            var itemWidth = 200;
            var totalItems = $('.news-item').length;
            var containerWidth = totalItems * itemWidth;

            container.css('width', containerWidth);

            $('#scroll-left').click(function() {
                container.animate({scrollLeft: '-=' + itemWidth}, 500);
            });

            $('#scroll-right').click(function() {
                container.animate({scrollLeft: '+=' + itemWidth}, 500);
            });
        });
    </script>
</body>
</html>

常见问题及解决方法

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

滚动位置不准确：
- 原因：可能是由于计算滚动位置的逻辑有误。
- 解决方法：仔细检查滚动位置的计算逻辑，确保每次滚动的位置都是准确的。
兼容性问题：
- 原因：不同浏览器对 JavaScript 和 CSS 的支持程度不同。
- 解决方法：使用 jQuery 处理兼容性问题，确保代码在主流浏览器中都能正常运行。

通过以上示例代码和解决方法，你应该能够实现一个基本的 jQuery 新闻左右滚动效果，并解决常见的滚动问题。

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

有帮助

没帮助

带有连续滚动的Jquery插件，如新闻票证

、

我正在寻找一个可定制的新闻播客风格的jQuery插件与：我已经找到了，它做的和我想要的完全一样，但是没有左右键。

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

回答已采纳

1回答

是否有将RSS提要显示为水平滚动文本的模块？

是否有类似于ScrollText模块从RSS中获取文本并将其显示为水平滚动文本？ ScrollText的目的是将节点标题中的文本显示为水平滚动文本。

浏览 0提问于2013-08-28得票数 -2

回答已采纳

4回答

带有jQuery的新闻栏

、

我需要用jQuery制作一个水平的“突发新闻”样式栏。我从服务器上选择新的(简单的部分)，我需要一些方法来让它们从左到右不断滚动。有什么jQuery插件可以帮我吗？谢谢

浏览 2提问于2009-08-06得票数 0

回答已采纳

2回答

如何在用户向下滚动屏幕后清除图像缓存，并在屏幕向上滚动时重新加载？

、

如何在用户向下滚动屏幕后清除图像缓存，并在屏幕向上滚动时重新加载？当用户向下滚动新闻卡片时，我有一个懒惰的listview，图片是从web加载的。当许多图像加载到500左右时，应用程序开始变得“慢”，我猜这是因为缓存中有很多图像，我的图像只有100pxs。

浏览 86提问于2021-07-23得票数 3

1回答

如何检测在回收器视图(如Youtube自动播放新闻馈送)中查看可见性(80%左右)当~80%可见时播放视频

、、、、

如何检测在回收器视图(如Youtube Autoplay新闻馈送)中查看可见性(80%左右)在~80可见时播放视频。视频回放在滚动时停止，并在空闲状态下开始播放，但最初，如果视频处于播放状态，则即使在滚动状态下也会在该状态下继续播放，直到它在80左右可见，然后停止，那么这是如何完成的呢？我们很欣赏你的想法和例子。

浏览 5提问于2020-04-03得票数 0

3回答

如何创建新闻滚动条

、、

我想要一个从右向左滚动的新闻滚动条，可以很容易地添加删除项目。经过研究，我注意到他们中的许多人是从上到下滚动的，而不是从右到左的。新闻滚动条的要点是很容易添加或删除项目，当您悬停时，滚动条会停止，然后在鼠标不在其上时重新开始。我刚找到liScroll - 看起来也很不错

浏览 0提问于2012-09-10得票数 10

回答已采纳

1回答

标题栏中的文本

、、、

如何使用VS2008在C#.net中移动表单标题栏中的文本？

浏览 4提问于2009-08-24得票数 0

1回答

1.0.js从左到右滚动

、

我开发了新闻网站，我使用jquery.li-scroller.1.0.js查看我的突发新闻，但是这个脚本从右到左滚动新闻。我想从左到右滚动新闻，因为我使用阿拉伯语。剧本： settings = jQuery.extend({ return th

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

1回答

jQuery左右键滚动

、、

我试图做一个简单的左和右滚动使用图像作为滚动，但我似乎无法使它工作。

浏览 0提问于2013-08-29得票数 0

回答已采纳

2回答

Jquery插件冲突

、、

我有一个滑块和新闻滚动条在我的主页上。[2]<script type="text/javascript" src="..js/jquery.superfish.js"></

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

2回答

除了Firefox3.5之外，多个jquery代码可以在每个浏览器中运行

、

// Stop the link click from doing its normal thing }); 第一个控制滚动新闻滚动条这3个文件都有单独的jquery文件与之关联，并按如下方式链接：(放在上面的jquery部分之前。第一个用于滑动切换，第二个用于新闻滚动条，第三个用于角落) <script src="../jquery/

浏览 4提问于2009-09-13得票数 0

回答已采纳

1回答

新闻报价器在悬停后无法重新启动

、

我正在使用一个演示jquery新闻报价器。它工作得很好。当我在新闻滚动条上悬停时，它就会停止。但在此之后，它将不再滚动。

浏览 0提问于2013-02-12得票数 1

回答已采纳

1回答

延迟加载构件负载

、、、、

我正在用C#和MVC5建立一个新闻网站。我还使用MsSQL。在这个项目中，我把所有的东西都作为一个部分视图，当我需要的时候，我调用组件并将它放入需要的部分。(将组件绑定到db等部分)。其中之一是延迟从jquery加载。我怎么才能解决这个问题？编辑：；jquery.

浏览 3提问于2014-03-27得票数 0

回答已采纳

3回答

使用jquery mobile -左右滚动

、、

我使用的是Jquery mobile。我正在试着做一个像市场应用程序中的那样的颂歌。然而，我的都是基于网络的。我已经在iscroll上看到了它很好，但很难在JQM中工作。

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

2回答

重写jQuery以左右滚动

、、

我需要帮助重写我的jQuery。我在顶部有四个链接：“一，二，三，四”当你从2 --> 1开始，它会从右边擦入。不是很理想。position: relative; width:90%;jQuery

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

回答已采纳

1回答

我有一个一页的网站，滚动到正确的部分，当它点击导航链接-请参阅的现场例子。我现在正在扩展网站并添加一个位于子目录中的博客，我正在尝试设置博客导航来加载www.cleanupbritain.org，然后滚动到正确的部分。这个是可能的吗？我是jQuery的新手，因此任何帮助都将不胜感激。-- ScrollTo for navigation scrolling -->jQuery(window).load(funct

浏览 2提问于2011-09-10得票数 1

4回答

jquery:如何循环div

、、、

使用jquery，我如何能连续自动滚动div？就像这个网站的新闻和专题部分：。而且，当你将鼠标悬停在滑块上时，它会停止滚动，直到你离开为止。有没有能做到这一点的jquery插件？

浏览 0提问于2012-04-19得票数 3

1回答

JavaScript中的水平新闻滚动条

、、

我想我可能已经浏览了上百个网站，但我似乎没有找到适合我的网站的完美的横向新闻滚动条。我的要求是： 1)必须平滑2)必须从浏览器的右端滚动到左端(意味着100%宽度) 3)必须是连续的(意味着新闻项目-1必须紧跟在最后一个新闻项目之后) 4)必须重量轻。5)必须在鼠标悬停时暂停。此外，我必须等待100%的空格滚动，才能在最后一个新闻项之后看到news-item-1 )。我真的更喜欢它是在jQuery中，因为我的其他脚本使用jQuery，

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

3回答

Ajax无限滚动功能不能在移动设备上触发

、、、

我有一个网站，其中包含一个新闻馈送很像facebook。当用户到达页面底部时，此新闻提要使用无限滚动。当在桌面浏览器上查看网站时，一切都运行得很好，但是当在我的iphone上查看网站时，该功能不会启动，除非我慢慢滚动到触发点。为了澄清，如果我以正常速度一直滚动到底部，它就会超过函数应该触发的点，并且没有任何反应。然后，如果我稍微向后滚动页面(100像素左右)，该函数将被调用。同样地，如果我碰巧缓慢地向下滚动页面，该函数将被调用。因此，当我快速(或正常速

浏览 4提问于2014-08-20得票数 1

1回答