文章/答案/技术大牛

发布

jquery横向无缝图片滚动代码

基础概念

jQuery横向无缝图片滚动是一种网页效果，通过动态地移动图片容器，使得图片看起来像是在无限滚动。这种效果常用于网站首页、广告栏等位置，以吸引用户的注意力。

类型

纯CSS实现：通过CSS动画实现简单的横向滚动效果。
JavaScript/jQuery实现：通过JavaScript或jQuery控制DOM元素的位置和动画效果。

应用场景

网站首页的图片轮播。
广告栏的动态展示。
新闻或产品展示页面。

示例代码

以下是一个使用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-container ul {
            list-style: none;
            padding: 0;
            margin: 0;
            white-space: nowrap;
            position: absolute;
        }
        #scroll-container li {
            display: inline-block;
            margin-right: 10px;
        }
    </style>
</head>
<body>
    <div id="scroll-container">
        <ul>
            <li><img src="image1.jpg" alt="Image 1"></li>
            <li><img src="image2.jpg" alt="Image 2"></li>
            <li><img src="image3.jpg" alt="Image 3"></li>
            <!-- 添加更多图片 -->
        </ul>
    </div>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function() {
            var $container = $('#scroll-container');
            var $ul = $container.find('ul');
            var $items = $ul.find('li');
            var itemWidth = $items.first().outerWidth(true);
            var totalWidth = itemWidth * $items.length;

            // 复制第一项到最后
            $ul.append($items.first().clone());

            // 设置初始位置
            $ul.css('width', totalWidth * 2);
            $ul.css('left', -totalWidth);

            function scroll() {
                $ul.animate({
                    left: -totalWidth
                }, 10000, 'linear', function() {
                    $ul.css('left', 0);
                    scroll();
                });
            }

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

可能遇到的问题及解决方法

图片加载延迟：确保图片资源路径正确，并且图片大小适中，避免加载过慢。
滚动速度不均匀：调整animate函数中的时间和缓动函数，确保滚动效果平滑。
浏览器兼容性：测试不同浏览器下的效果，确保兼容性良好。

通过以上代码和解释，你应该能够实现一个基本的jQuery横向无缝图片滚动效果。如果有更多具体问题，可以进一步讨论。

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

有帮助

没帮助

滚动背景

、、

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

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

2回答

像Netflix上那样的水平滚动图像

、、、、

我正在尝试创建一个包含视频内容的网站，我想在主页上横向选择封面图片，就像netflix所做的那样。再见，罗伯特

浏览 2提问于2015-01-19得票数 4

回答已采纳

1回答

正确的图像大小、ScrollViewer、方向、拉伸

、、、

当手机处于纵向位置时，图片与纵向和横向方向是适合屏幕的。当手机处于横向位置时，带有肖像方向的图片不适合屏幕，用户必须滚动它们才能看到完整的图片。例如，我的屏幕在纵向位置w/h= 447/ 585，在横向位置585/ 447。在手机的纵向位置，我的图片与纵向适合大小为447/ 585，但在横向位置相同的图片成为585在宽度和高度按比例增长的最大可能让我们说800p我知道这是因为S

浏览 0提问于2011-10-21得票数 0

2回答

让图片横向滚动

、

我正在尝试让一行图片停留在一行内，然后使用overflow: scroll进行横向滚动；然而，无论我做什么，这些项目都会一直位于另一个项目的下方。media screen and (min-width: 1550px) { width: 33%;} 有没有人知道我怎么才能让图片保持在一行并横向滚动，而不是让它们在彼此下面滚动？

浏览 66提问于2017-07-13得票数 0

1回答

我有一个网站，这是创建加载的网页视图在android设备上，所以基本上我所期望的是，我要加载的网站将适合屏幕，即不应该有任何溢出的页面和引入滚动当你在纵向模式下加载网站时，它加载得很好，我的意思是一切都在适当的位置，没有溢出，图片的大小是正确的，如果我在查看网页时将其更改为横向，一切仍然很酷，它仍然缩放并显示与纵向模式相同的视图，你只是在它周围获得了额外的空间。但是，如果我先在横向模式下加载网页视图，似乎我网站的内容在某种程度上被放大了，因为在横向模式下，你有额外的宽度，现在如果我把我的手机设为纵向，它

浏览 2提问于2012-05-17得票数 3

2回答

scrollTo和水平表

、、、

我试图做一个横向滚动组合网站。我希望用户能够使用下一个/前一个按钮点击图片，并像往常一样使用鼠标和滚动条滚动。然而，我在使用jquery实现这一点时遇到了困难。使用该表是因为这是横向网站中的最佳做法。我希望使用scrollTo()插件来允许表向前滚动或向后滚动，具体取决于单击哪个按钮。最终产品将类似于，尽管我试图使用这个站点上的代码，而根本就没有运气！src="media/images

浏览 7提问于2010-07-13得票数 0

回答已采纳

1回答

找出带有音高校正的手机方向

、

accelerationValues, geoMagnetValues)) { 滚动和方位角在所以我在碰到了代码。我刚用过它，没有屏幕旋转调整。我有一些疑问。中定义的音调与我通过方法得到的不同:1当我向右倾斜手机时，音高值会发生变化，而不应该改变。实际上，它与方法1的滚动值相对应。然而，当我把手机转左时，中的方法给出了滚动值，但有一个不同的符号。方位没问题。最后，m_pitch_a

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

1回答

使多个滚动视图一起响应

、、

我想制作一个中心滚动视图和x轴滚动视图的图形视图。基本上，如果用户在中间横向滚动，应该会导致x轴滚动视图相对于中心滚动并保持不变。反之亦然。我希望用户能够在x轴滚动视图上滚动，并使中心滚动。附件是一张图片，我有显示的情况。

浏览 1提问于2015-04-14得票数 1

1回答

使用Ipad中的size类在横向模式中查看类似Youtube的视图

、、、、

目前我正在使用size类和storyboard来实现它，但问题是我的布局与纵向相比应该有很大的变化，而且由于ipad纵向和横向的size类是相同的，我是否应该为横向版本使用单独的视图控制器。从ipad纵向到横向无缝过渡的最佳方法是什么?你认为youtube正在使用不同的视图控制器/xib来实现它。另一个问题是这个代码是由其他公司编写的，给我的指示是不要对现有代码做太多修改。我的问题是，我应该使用两个不同的xib，或者我可以完全使用一个不同的视图控制器作为横向版

浏览 0提问于2016-01-19得票数 0

1回答

ScrollToTtem不平滑

、、

我正在使用colletionview图像来水平滚动图像。我使用didselectitem从第一个集合视图中获取索引，并通过segue转换，使用所选的索引从第二个集合视图中的数组中挑选图像。由于我使用的是ScrollToItem，当我点击image5时，它会在跳过前5张图片后跳到第6张图片。一切正常，但问题是，过渡并不顺利。我可以看到前5张图片滑动了几分之一秒，这并不酷。如何在滚动时获得无缝过渡？

浏览 13提问于2020-05-08得票数 0

回答已采纳

1回答

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

、

我是jQuery的新手，我正在尝试向下滚动和显示图像。我使用的代码成功地滚动了图像，但是是横向的，这不是我所需要的。这是我正在使用的代码 var y = 0; y -= 1; $('.scroller

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

2回答

Swiper滑块画廊，以及更改Iphone的方向

、、、、

我做了一个图片库格式。它是响应式的(boostrap和一些自己的媒体@)，当我点击一个图片时，一个Swiper (插件)滑块就会打开，以更大的尺寸逐个显示图片。我在PC和Android手机上进行了测试，它在这两台设备上运行良好：除了iphones，当我点击一张图片时，它可以很好地打开，但当方向改变时orientationchange", function() { mySwiper.update(); and thisone: mySw

浏览 8提问于2016-06-16得票数 1

1回答

Android中的垂直和水平滚动列表或网格

、、、

我在一个android应用程序中工作，我需要建立一个垂直滚动列表，每个项目也是一个横向列表。然而，每个项目都有其独立的水平滚动。甚至有些物品也不可能。这在Android系统中是可能的吗？因为我的数据是一个数组。提前谢谢你。

浏览 4提问于2015-10-15得票数 5

回答已采纳

4回答

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

、

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

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

1回答

缩放webview中的图像以适应父布局高度，因此默认情况下没有滚动。(Android)

、、、

我有一个WebView，我正在加载一张图片。底部有一个小的静态页脚，所以WebView不会占据整个屏幕高度。图像永远不会比宽度更高，所以在纵向模式下，图像会加载到WebView fine中，大小调整为不需要滚动。但在横向时，图像高度远远超出WebView高度，需要用户滚动。(值得一提的是，我在活动开始时根据用户设置在代码中控制方向，并且我已经修改了manifest.xml以防止活动在屏幕方向更改时重新启动。)对于纵向和横向，我如何让图像适合WebView的高度(以及宽度)，这样用户在默认

浏览 3提问于2014-02-08得票数 1

1回答