图片不间断向上滚动js代码
要实现图片不间断向上滚动的效果，可以使用JavaScript结合CSS动画来完成。以下是一个简单的示例代码，展示了如何实现这一效果：
HTML结构
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>图片不间断向上滚动</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="scrolling-container">
<div class="scrolling-content">
<img src="image1.jpg" alt="Image 1">
<img src="image2.jpg" alt="Image 2">
<img src="image3.jpg" alt="Image 3">
<!-- 可以继续添加更多图片 -->
</div>
</div>
<script src="script.js"></script>
</body>
</html>CSS样式
/* styles.css */
body {
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f0f0f0;
}
.scrolling-container {
width: 80%;
overflow: hidden;
position: relative;
}
.scrolling-content {
display: flex;
flex-direction: column;
animation: scroll-up 10s linear infinite;
}
.scrolling-content img {
width: 100%;
height: auto;
}
@keyframes scroll-up {
0% {
transform: translateY(100%);
}
5% {
transform: translateY(0);
}
95% {
transform: translateY(0);
}
100% {
transform: translateY(-100%);
}
}JavaScript代码
// script.js
document.addEventListener("DOMContentLoaded", function() {
const container = document.querySelector('.scrolling-container');
const content = document.querySelector('.scrolling-content');
// 复制内容以实现无缝滚动
const clone = content.cloneNode(true);
container.appendChild(clone);
// 调整动画持续时间以匹配内容高度
const contentHeight = content.offsetHeight;
const duration = (contentHeight / container.offsetHeight) * 10;
content.style.animationDuration = `${duration}s`;
clone.style.animationDuration = `${duration}s`;
});解释
- HTML结构：创建一个包含图片的容器，并在其中放置多个图片元素。
- CSS样式：使用CSS动画
@keyframes定义向上滚动的动画效果。通过设置transform: translateY()来实现滚动效果。 - JavaScript代码：在DOM加载完成后，复制滚动内容并将其附加到容器中，以实现无缝滚动效果。同时，动态调整动画持续时间以匹配内容的高度。
应用场景
- 轮播广告：在网站顶部或底部展示不断滚动的广告图片。
- 新闻滚动条：在新闻网站中显示最新的新闻标题或摘要。
- 社交媒体动态：在社交媒体页面中展示用户动态或推荐内容。
优势
- 动态效果：吸引用户注意力，提升用户体验。
- 自动化展示：无需人工干预，自动循环播放内容。
- 灵活性：可以轻松添加或删除图片，适应不同的展示需求。
通过以上代码和解释，你应该能够实现一个简单且高效的不间断向上滚动图片效果。如果遇到任何问题，可以检查CSS动画设置和JavaScript逻辑是否正确。
相关·内容
1回答
我试着让我的旋转木马在我向上滚动时转到下一张图片，但当我向下滚动时，返回到下一张图片。我的代码： $('#this-carousel-id').bind('mousewheel', function(e){$(this).carousel('next');});此代
浏览 2提问于2014-04-25得票数 0
1回答
我被卡住了，用动画滚动内容。当我单击箭头按钮时，只有Animated标签会向上滚动，但其中的内容会向上滚动。下面是我的详细图片：
当我点击按钮时：
这是我的代码:这是我的函数：
这是渲染：
这是我的风格：
浏览 3提问于2017-10-17得票数 0
我给了它一个定义的宽度，以适应屏幕(然后我使用这个定义的宽度来缩放高度，所以我知道宽度，但在下载和设置它之前不知道高度(或图像的纵横比))
向下滚动时一切正常，因为列表视图预加载了5行。它发出5个调用来下载我代码中的图像。这使得向下滚动变得流畅。问题是当我向上滚动的时候。当我向上滚动时，视图被重用，我知道一个宽度，所以这没问题，但最初高度是0，直到我完全加载图像；当它完全加载时，图像视图扩展到任何高度(即1024)，这使得滚动断断续续，因为它将视图从0
浏览 1提问于2014-12-08得票数 3
我不确定我的图片，我已经创建了一个带有项目的列表框，向上向下滚动是可以的，但是当我drawItem图片(图片+项目名称)时，我看到了带有项目名称的图像，但向上向下滚动时出现了问题。
有什么问题吗？
浏览 7提问于2012-05-30得票数 2
1回答
我有一个div加载的内容，从其他的html页面上的横幅。我想知道在技术上是否有可能创建一个移动的文本，而不是在旗帜下，所以不会被打断。<li id="menu1"><div class="link-bg"><a href="#sur-toute-la-ligne">SUR TOUTE LA LIGNE</b></a></div></li>谢谢你的帮助。
浏览 1提问于2012-07-06得票数 0
基本上，我已经导入了一个图片，我一直在尝试使用仿射变换为图片创建简单的摇动动画(图片将不断地向上和向下移动一点点，不间断)。
虽然我很感激是否有其他简单的方法，但我需要在这个过程中使用仿射变换。非常简单的代码示例会有帮助，谢谢！
浏览 2提问于2015-12-11得票数 0
回答已采纳
4回答
我有一个带有背景图片的<select multiple>标签。所以现在每当我向下滚动时，背景图像都不会随着文本向上移动。我得到了这样的效果：左边的图片在前面，右边的图片在我滚动之后对如何做到这一点有什么建议吗？
浏览 0提问于2010-12-08得票数 1
回答已采纳
1回答
我有个小问题；在图片加载到图片库后，我向下滚动，向上滚动，图片总是重新加载。是否有任何类型的内存管理，我可以使用，以保持已加载的图片，从重新加载后，在画廊滚动离开？
浏览 2提问于2017-03-23得票数 0
回答已采纳
请看这张图片，我在某个网站的侧边栏(黑框)中有这个div，当我向下滚动或向上滚动时，我不想让它隐藏起来……我希望它在我向下滚动时向下移动，在我向上滚动时向上移动，这样它就永远不会隐藏起来。
浏览 3提问于2010-11-02得票数 1
回答已采纳
我能够实现动态添加图片的水平滚动，以及无限滚动和懒惰加载图片。
实际上，我有点卡住了，关于如何在显示的水平图像上进行图像的垂直滚动。例如:我从服务器上下载了一些图片，这些图片是随机的图片，这些图片与我服务器上用户的一些相册相关联。因此，当用户从左向右滚动(水平)时，scrollview应该显示所有下载的图像串，但当用户向上/向下滚动时，scrollview应该显示与当前图
浏览 0提问于2013-02-18得票数 4
3回答
我想让他们慢慢地向上滚动，就像电影片酬一样。我自己也可以很容易地做到这一点，但问题是，当用户使用他们的滚动轮时，我希望列表移动得更快(然后当他们停止滚动时放慢速度)。另外，我需要列表在结束时不间断地重新开始。谢谢!更新：<m
浏览 8提问于2011-10-22得票数 4
回答已采纳
好的，所以我正在制作一个Tumblr主题，它现在是实时的，我很难定位页脚(它目前只包含一个div，包含一个指向存档的链接)。这张笔记的清单就在它下面，它就放在它能想到的地方，而没有考虑到明显地坐在那里的笔记列表(粗鲁)。 <style>{block:PermalinkPage}#footer {}{/block:PermalinkPage}</style>
但我不知道怎么做，而且定位似乎奇怪，我也不完全确定为什么。或者，可能将原始页脚设置为显示: permalink块中没有显示，并且创建了一个只出现在permalink页面中的单独的页
浏览 0提问于2015-04-26得票数 0
2回答
我尝试了所有的方法，但我不能写出好的Jquery代码来让我的身体向上滚动。这是我的JS：当用户点击特定的div时，它会让body向下滚动，然后我想反转这个函数，让body向上滚动。
浏览 3提问于2013-01-26得票数 3
1回答
我正在使用锤子js在任何移动的桌子上滑动手势。这是一个简单的向左/向右滑动转到下一步/后退。
但我希望它向上/向下保持原样(向上/向下滚动)。代码非常简单，问题是当我不正常地向上/向下滑动页面滚动时。有时它根本不滚动，或者稍微向上或向下滚动。
浏览 3提问于2013-01-31得票数 3
它最初是隐藏的，我想显示当用户向下滚动或向上滚动页面并离开主菜单时。以下是我的Jquery代码： $("#sticky").show(); $("sticky").hide(); });
我附上了这张图片
浏览 2提问于2016-02-18得票数 1
回答已采纳
1回答
我见过一个有不同类型滚动的应用程序。我希望附上的图片能够解释这一点。在这里，当列表向上滚动，移动通过采取DownloadAll，Playall按钮也上升。稍后，DownloadAll和PlayAll按钮停止上升，只有列表向上滚动。
我不知道这叫什么。我试着搜索，但找不到类似的东西。如何实现这种类型的滚动？
浏览 3提问于2014-09-24得票数 0
回答已采纳
在用户向下滚动或向上滚动之后，左侧以红色突出显示的计数会根据用户的滚动方向而增加/减少。 我想要实现的是自动更新显示项的索引，在图片上用红色表示。因此，每当用户向下或向上滚动时，此索引都会通过显示项的索引进行更新。 图为我已经到了第26项。每当我向下或向上滚动时，这个索引都会更新。 我尝试使用为滚动事件发出的偏移量，但没有成功。
浏览 38提问于2020-08-21得票数 1
回答已采纳
1回答
我知道它们的大小是一个问题，因为当我试图一次加载所有这些图片时，它会崩溃(即使只有10张图片，也需要很长时间才能启动)。这是我的代码。您可以假设另一个方法负责将图像加载到一个名为framedSprites的可变数组中(除了由于大小/崩溃的原因，我一次只能加载10个图像)。
浏览 0提问于2012-08-07得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
云直播活动推荐
腾讯云开发者
