图片滚动js

图片滚动是一种常见的网页设计效果，用于展示一系列图片，并通过滚动的方式逐个显示这些图片。以下是关于图片滚动的基础概念、优势、类型、应用场景以及常见问题及解决方法。

基础概念

图片滚动通常涉及以下技术：

HTML：用于结构化页面内容。
CSS：用于样式设计和动画效果。
JavaScript：用于实现动态滚动效果。

优势

用户体验：动态展示图片可以吸引用户的注意力，提高页面的互动性。
信息展示：可以在有限的空间内展示更多的图片内容。
节省空间：相比静态展示，滚动方式可以更有效地利用页面空间。

类型

水平滚动：图片从左到右或从右到左滚动。
垂直滚动：图片从上到下或从下到上滚动。
无限循环滚动：图片在到达边界后自动返回起点，形成循环效果。
响应式滚动：根据屏幕大小和设备类型调整滚动方式。

应用场景

新闻网站：展示最新新闻图片。
电商网站：展示商品图片。
社交媒体：展示用户上传的照片。
企业官网：展示公司文化和产品系列。

示例代码

以下是一个简单的水平无限循环滚动的JavaScript示例：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>图片滚动</title>
<style>
  #scrollingImages {
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
  }
  .scrolling-item {
    display: inline-block;
    margin-right: 20px;
  }
</style>
</head>
<body>

<div id="scrollingImages">
  <img class="scrolling-item" src="image1.jpg" alt="Image 1">
  <img class="scrolling-item" src="image2.jpg" alt="Image 2">
  <img class="scrolling-item" src="image3.jpg" alt="Image 3">
  <!-- 更多图片 -->
</div>

<script>
  function scrollImages() {
    const container = document.getElementById('scrollingImages');
    const items = container.getElementsByClassName('scrolling-item');
    let totalWidth = 0;

    for (let item of items) {
      totalWidth += item.offsetWidth + parseInt(window.getComputedStyle(item).marginRight);
    }

    container.style.animation = 'scroll linear infinite';
    container.style.animationDuration = `${totalWidth / 50}s`; // 速度调整

    @keyframes scroll {
      0% { transform: translateX(0); }
      100% { transform: translateX(-${totalWidth}px); }
    }
  }

  window.onload = scrollImages;
</script>

</body>
</html>

常见问题及解决方法

滚动速度过快或过慢：
- 原因：动画持续时间设置不当。
- 解决方法：调整animationDuration的值，使其符合预期效果。

图片加载延迟：
- 原因：图片较大或网络状况不佳。
- 解决方法：优化图片大小，使用懒加载技术。
滚动不流畅：
- 原因：浏览器性能问题或JavaScript执行效率低。
- 解决方法：优化代码，减少DOM操作，使用requestAnimationFrame替代setTimeout/setInterval。

通过以上方法，可以有效实现并优化图片滚动效果，提升用户体验。

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

有帮助

没帮助

在实现jQuery照片幻灯片时遇到问题

、、、、

我遇到的三个问题是： 1)当图像滚动时，有一个父容器延伸到幻灯片放映面板的宽度之外。2)我已经调整了每个属性的边距和填充，但我不能让图像周围的黑色填充消失。3)我不知道如何调整图像之间的间距。

浏览 2提问于2011-03-07得票数 0

回答已采纳

1回答

如何为Lightbox中的图片设置相同的宽度？

、、、

在我的网站上，有些图片很长(宽度在400到1000 On之间，高度是>= 3500 On)。我希望为所有图片设置相同的宽度(800‘t)--在Lightbox中，然后向下滚动以查看它们，但是不知道怎么做。在lightbox.css或lightbox.js中到底应该在哪里和什么地方进行更改？

浏览 1提问于2017-02-03得票数 0

回答已采纳

2回答

如何在一个有很多图片的网页上实现平滑滚动？

、、、

我的一个页面上包含了很多图片，Pinterest是最好的比较，我注意到滚动，特别是在Chrome中，滚动真的很不流畅。有没有办法实现更流畅的滚动？

浏览 0提问于2013-03-19得票数 0

回答已采纳

2回答

在浏览器中显示/滚动浏览成堆的图片

、

THe的简易方式(只需加载2000张图片并滚动)会大大减慢滚动速度，大概是因为有太多图片需要保存在内存中。我很乐意听到关于能够在浏览器中快速滚动1000张图像(就像在桌面上一样)的策略的想法。

浏览 0提问于2010-06-16得票数 1

1回答

移动Safari和x-偏移量

、、、

我的理解是，需要一些JS欺骗，因为Mobile不支持确定对象(或viewport)的x-偏移量的常用方法。

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

1回答

如何加速Angular启动？

、、、、

我在angular应用程序上工作，但当我构建它并在服务器上托管它时，需要大约3-5分钟才能启动应用程序！那么我如何解决这个问题并加速angular启动呢？

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

1回答

使用锚水平滚动时防止垂直滚动

、、

有些帖子是简单的文本，有些是图像，有些是图片画廊。对于这个图片库，我只显示第一张图片，然后有锚指向其他隐藏在视口的图片(post本身是一个flex元素，具有溢出-x: auto with :nowrap，子图片为flex: 0 auto和max-width因此，提要与其他x的隐藏类似，每个提要都有所述图片的ID，可以在没有JS的情况下进行滚动：X\xX\x 我故意避免这个项目的JS，像这样的

浏览 3提问于2021-03-05得票数 0

2回答

有没有一种方法可以将lazyload js库与Picturefill结合起来？

、、

我想知道，当lazyload的图像语法需要img标记以及数据原版时，如何将lazyload.js与Picturefill结合在一起，而Picturefill的语法没有这些地方。-- Fallback content for non-JS browsers."> </span> 不知道我会把类lazyload.js所需的类属性放在图像标签上，或者数据原始属性上。对于如何在使用Picturefil

浏览 3提问于2013-12-10得票数 2

回答已采纳

1回答

selenium java中另一个页面内的滚动窗口

、、、

我正在尝试滚动另一页中的一页。请参阅所附图片 ? 我试着用下面的代码 JavascriptExecutor js1 = (JavascriptExecutor) driver; js1.executeScript("","window.scrollBy(0,1000)"); 但它滚动整个页面，而不是页面内的窗口。如何指定要滚动此特定窗口提前感谢

浏览 18提问于2019-03-07得票数 0

1回答

将react-autosuggest与react-custom-scrollbars一起使用

可以将react-custom-scrollbars和react-autosuggest一起使用吗？我为auto-suggest写了这段代码，但它不能正常工作： const callRef = scrollbars => { ref(scrollbars); } <Scrollba

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

2回答

使用Javascript和Ajax实现手机无限滚动

、、、

我想为移动网站实现无限滚动。我想找一个使用JS，PHP和Ajax的插件。提前感谢！！

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

1回答

如何延迟默认浏览器滚动到元素？

、、、

我正在使用JS / SCSS构建以下组件，但我无法实现一件事，我在谷歌上搜索了它，但没有得到任何结果。正如你在下面的图片中所看到的，图像在滚动时被延迟了，它们只有在文本向右滚动一点后才开始动画，有一个300ms的延迟。

浏览 19提问于2019-07-08得票数 0

回答已采纳

2回答

单击按钮时水平滚动

、、、

我想通过左右单击按钮来水平滚动div，但它不起作用$('#myDiv').scrollLeft(300) $('#right').live('click' , function(){如何通过单击一个字节来滚动div。我还想删除滚动条

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

回答已采纳

1回答

如何修复视差窗口滚动溢出？

、、、

我在页面头上的图片上使用了parallax.js v1.3。请帮我找出为什么当我向下滚动图片溢出。当我向下滚动时，图片溢出在面包屑上。js文件位于以下链接：，其中我使用$('.parallax-window').parallax({}); /* Parallax modal*/调用脚本，该脚本在上调用js paralax 我认为这可能与正

浏览 7提问于2015-05-16得票数 8

回答已采纳

1回答

带有未知高度居中图片的水平滚动条

、

我想在html/css (没有js)中制作一个从数据库中带水平滚动条的图片块，这样无论它们的高度如何，它们都会居中。我找到的将未知高度的图片居中的唯一解决方案是使用display: table或display: flex。但我发现制作水平滚动条的唯一解决方案是使用display: block。我的意思是图片应该居中，不同的高度：

浏览 6提问于2013-12-24得票数 0

2回答

由于图片导致页面加载时负载过大(滞后)

、、

当我的页面加载(DOM)时，我调用一个函数返回1880张图片，这些图片被存储在steam服务器中。

浏览 0提问于2017-10-31得票数 1

1回答

因此，我正在创建一个程序，在运行时创建的图片框中显示来自互联网的图片。我为每一张图片创建一个图片框，一次屏幕上有6个图片框。但问题是，随着我向下滚动，越来越多的图片被加载，导致程序占用了大量的内存。因此，我想知道我如何“卸载”已经通过的图片，而不处理这些图片，这样我就可以再次上升并看到它们，而不会再次从see服务器上撤回它们(如果这是可能的话)。如果我是对的，这将减少内存消耗。我添加了这张图片，也许是为了帮助理解这个

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

回答已采纳

1回答