文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布

js多行图片左右滚动代码怎么写

要实现JavaScript中的多行图片左右滚动效果，可以使用CSS动画结合JavaScript来控制图片容器的滚动。以下是一个简单的示例代码，展示了如何实现这一效果：

HTML结构

代码语言：txt
复制
<!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-wrapper">
        <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样式

代码语言：txt
复制
/* styles.css */
.scrolling-wrapper {
    width: 100%;
    overflow: hidden;
    position: relative;
}

.scrolling-content {
    display: flex;
    animation: scroll 20s linear infinite;
}

.scrolling-content img {
    width: 200px; /* 根据需要调整图片宽度 */
    height: auto;
    margin-right: 20px; /* 图片之间的间距 */
}

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

JavaScript控制

代码语言：txt
复制
// script.js
document.addEventListener('DOMContentLoaded', function() {
    const scrollingContent = document.querySelector('.scrolling-content');
    const images = scrollingContent.querySelectorAll('img');
    const totalWidth = Array.from(images).reduce((acc, img) => acc + img.offsetWidth + 20, 0); // 计算总宽度

    // 复制一份内容以实现无缝滚动
    const clone = scrollingContent.cloneNode(true);
    scrollingContent.parentNode.appendChild(clone);

    // 调整动画持续时间以适应内容长度
    const duration = (totalWidth / window.innerWidth) * 20; // 假设每秒滚动屏幕宽度的1/20
    scrollingContent.style.animationDuration = `${duration}s`;
    clone.style.animationDuration = `${duration}s`;
});

解释

  1. HTML结构：创建一个包含图片的容器，外部容器用于控制溢出隐藏。
  2. CSS样式：使用@keyframes定义滚动动画，通过transform: translateX()实现水平移动。
  3. JavaScript控制：计算所有图片的总宽度，并动态调整动画持续时间以实现无缝滚动。复制一份内容并将其添加到DOM中，以实现视觉上的连续滚动效果。

应用场景

  • 广告轮播：在网站顶部或侧边栏展示广告图片。
  • 新闻滚动：在新闻网站展示最新新闻标题或图片。
  • 产品展示：电商网站展示多个产品图片。

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

  • 滚动不平滑：确保CSS动画的性能优化，避免使用会引起重绘和回流的属性。
  • 图片加载延迟：预加载图片或在图片加载完成后再启动动画。
  • 动画卡顿：检查是否有其他JavaScript任务阻塞主线程，考虑使用requestAnimationFrame优化动画性能。

通过以上代码和解释，你应该能够实现一个简单的多行图片左右滚动效果。根据实际需求调整样式和逻辑即可。

相关搜索:js左右图片滚动代码怎么写js多行图片左右滚动代码js多行图片左右滚动js点击左右滚动代码怎么写js自动左右滚动代码怎么写多行图片左右滚动的jsjs左右图片滚动代码图片左右滚动js代码js左右滚动图片代码js图片左右滚动代码js点击图片滚动代码怎么写js 图片点击左右滚动代码js图片自动左右滚动代码图片自动左右滚动js代码左右轮播js代码怎么写js写图片滚动代码js实现图片滚动轮播代码怎么写jquery图片左右滚动代码jquery左右滚动图片代码js 图片左右滚动
相关搜索:
页面内容是否对你有帮助？
有帮助
没帮助

相关·内容

    • CSS杂谈

    本文没有什么高深的东西，就是写几个CSS样式经常遇见的东西，可能大部分都已经知道怎么解决了，当做小白文浏览就好。...当我们把一些块元素设置display-inline-block的时候，你会发现各个块之间有间距，刚开始我以为是没有设置margin 0 和padding 0，后来才知道，是代码换行的原因，只要把代码之间的换行去掉就没问题...内容较多，滚动定位，为了用户体验我们会想要滚动的时候是慢慢滚动的，我们可以用JS设置animate来实现。...当你要做很多边框一层一层的时候，我想大部分会采用很多div上下左右居中，然后不停背景图片，这边推荐使用box-shadow，其他都设置0，调整扩张半径。两层border的时候，使用outline。...CSS能做的其实太多了，只不过我们习惯了用JS去实现，但是CSS实现比JS实现在性能上更优，希望都能慢慢积累。 （完）

    1.1K20

    JavaScript笔记(21)

    preview下面的那个img,因为mask不在img里,无法捕获冒泡,所以当图片上遮罩出现时,就会一直频闪.而加在preview-img上的话就可以冒泡,鼠标放在图片上或者遮罩层上都会有效果....: 现在我们的遮罩层实现了移动,但是这样的话当我们鼠标到了边缘的时候,整个遮罩层也会跟着出去怎么办呢?...过去我们写的函数,需要调用才会开始执行,但是立即执行函数就不同,无需调用就能自己执行....(function( ){ }( )); 里面的function( ){ }就是一个函数,后面的()就是调用,但是直接写会报错,所以用一个括号包含起来,先执行里面的函数. 1. 2....我们会发现scrollWidth和clientWidth很相似,但其实他们有本质的区别: 如果我们放一个盒子,里面装着文字,那么输出的scrollWidth就是200: 但是如果我们将内容增加至很多行

    91710

    为什么你的React开发效率还这么低：Prompt工程改变了什么

    我打开VSCode： 梳理UI层级结构 设计Redux状态（或Zustand store） 写组件（大概200-300行） 写Hook处理数据获取和加载状态 加虚拟滚动优化 处理各种边界情况（网络错误、...他在我的代码基础上改了一些样式、调整了API接口，花了半天。 结果，他的代码反而没有我那些手工优化的小bug。 差别就在这里——不是谁的代码功底深，而是谁懂得怎么和AI对话。...$/.test(data.price)) { newErrors.price = "价格最多2位小数" } // ... 20多行类似的重复代码 return Object.keys(newErrors...从"写代码"变成了"描述需求" 老方式：我需要知道虚拟滚动怎么实现，然后一步步写出来 新方式：我需要清楚地描述"我要什么"，AI帮我实现 这是思维方式的转变。...store │ ├─ Context API │ └─ SWR配置 ├─ 业务逻辑 │ ├─ 表单验证 │ ├─ API请求封装 │ └─ 错误处理 每个模板记录： 原始需求是什么 Prompt怎么写的

    35810

    CSS编写规范

    js对其进行操作时产生不必要的冲突 3、CSS规范化之后，有诸多好处： 1）提高代码复用性： 2）有效压缩了文件大小 3）节省编写代码时间 4）便于统一修改 5）有效避免命名难的问题 6）便于阅读...另外，这些控件的CSS样式、js代码都应该写在单独的文件中，方便统一管理和进行统一更换样式，使用的时候直接调用这些文件即可。...可缩写的属性中，如果属性值只有1个或2个，那应该分开写；如果大于2个，应该合并写在一起。这样就可以使其编译的时间最优化。...2）左右等高布局 3）flex布局 4）水平垂直自动居中布局（多行文本/+图片垂直居中布局） 5）巧用margin/padding的百分比值实现高度自适应（多用于占位，避免闪烁） 6）左边/右边宽度固定...，右边/左边宽度自适应布局（左右两边宽度固定，中间宽度自适应） 7）响应式布局 8）多元素水平居中 9）清除浮动方法 10）在移动端实现真正的1px线 11）css画三角形 12）多行文本省略号 五、js

    3.7K30

    SuperSlide轮播插件滚动高度或宽度不对的问题解决

    SuperSlide 是一款比较实用的轮播插件，网站上常用的“焦点图/幻灯片”“Tab标签切换”“图片滚动”“无缝滚动”等都能实现，兼容包括 IE6 的绝大部分浏览器。...但是作者写的教程复杂难懂，有时需要摸索好久才能实现效果。 问题描述： 而且会存在一些问题，没有考虑到。今天就遇到一个问题，轮播的滚动距离出现偏移。...问题原因： 因为 SuperSlide 初始化后会自动计算（重置）li 的宽度和高度（左右滑动是宽度，上下滚动是高度）。所以 li 不能有 padding 属性值和 border 属性值。...那么不给 li 设置边距，怎么调整它的样式呢？ 解决办法： 我们可以在 li 标签内再套一个 div 给 div 设置边距，这样就不会出现偏移问题了。...代码示例： HTML：

    2.9K20

    JS零基础来搞微信小程序究竟有多难，结果狐友用VFP混成了

    完成上面tabBar界面后，我又碰到了一个问题，登录界面怎么带参数跳转到tabBar界面，经过一波三折，也搞通了。...第三个坑怎么用滚动选择器实现街道社区选择。 街道社区的滚动选择的效果如下图： 查了一下滚动选择器picker的帮助，发现只有省市区的滚动选择，没有街道社区的。...看来只能自已搞，也是上网下载代码研究，最后实现了，方法如下： wxml代码如下： Js代码如下: 上面是滚动选择器的初始值，multArray数组中有两个数组，第一个数组是街道，第二数组是社区。...第四个坑如何选择多张图片并预览，效果如下图： 示例可以添加3张图片，点击“+”号添加图片，点击“ⅹ”号删除图片，点击图片就预览，预览时左右拉可以切换图片，点击“上传图片”按钮，调用中间层sqltest...WXML代码如下： Js代码如下： Wxss代码如下： 中间层sqltest类中的getupfile方法代码如下： 这样就搞定了。

    1.2K20

    告别富文本编辑器，基于 ByteMD 为 Z-BlogPHP 打造一款顺手的 Markdown 写作插件

    左右分栏实时预览、GFM语法全覆盖、图片拖拽直传、双轨存储兼容全部主题——把富文本编辑器的格式噩梦，一次性交给插件处理。...编辑器整体体验：左右分栏+实时同步滚动插件在后台文章编辑页接管了默认的正文与摘要输入区域，取而代之的是经典的左右分栏布局。左侧是纯文本的Markdown源码输入区，右侧是对应的HTML渲染预览窗口。...为此插件利用ByteMD暴露的滚动偏移比例接口，将左侧原文区的滚动进度按段落比例映射到右侧预览区，保证两边基本对齐，写长文的时候体验非常流畅。...最开始我尝试在前台文章页也注入highlight.js资源并自动执行高亮，结果发现与部分自带高亮方案的主题产生了冲突——同一段代码被着色两次，标签结构变得一团糟，甚至有个别主题因此出现白屏。...排查之后我索性移除了前台的注入逻辑，改为在后台编辑器内部使用完整的highlight.js做预览，而提交到数据库存储的HTML则保留代码标签本身不做二次改写，由Z-Blog前台主题自行决定是否以及如何进行高亮渲染

    6200

    CreatorPrimer|飞机大战（一）

    通过上面的设置和ScrollCamera的十几代码，无限滚动背景就搞定了。 2....控制飞机移动 不知道大家还记得公众号之前的一篇文章《Cocos Creator基础教程(11)—可拖拽组件》 我直接将Dragable.js组件脚本拿过来，挂载到飞机节点上就OK了，代码很简单 /**...子弹发射 飞机游戏的一个亮点就是子弹发射的华丽视觉效果，Shawn在网上找了些子弹特效图片。...我们编辑一个子弹Bullet的预制体，这里使用到之前文章《Cocos Creator基础教程(12)—精灵变身》中的SpriteEx.js组件 在SpriteEx上面配置了几张子弹图片，使用index属性可以方便切换子弹的表现效果...小结 本次教程我们实现了一个最小飞机游戏的简单原型 核心地图滚动与子弹发射代码只有70多行，有没有觉得使用Cocos Creator开发游戏飞一般的简单呢... ?

    1.7K20

    sublimeText3之码上有爱

    文末有视频,本文可自由转载,还是觉得看动图,阅读文字好,毕竟视频要流量 前言 相信对于很多写代码的小伙伴来说,对于开发编辑器都不会陌生,什么editplus,dw,webstorm,hubuilder,...+Shift+↓ 将光标所在行和下一行代码互换（将光标所在行插入到下一行之后） Ctrl+Alt+↑ 或 Ctrl+Alt+鼠标向上拖动 向上添加多行光标，可同时编辑多行 Ctrl+Alt+↓或 Ctrl...编辑类 Ctrl+J:合并选中多行代码为一行:将多行格式的css属性合并为一行 ctrl+shift+D:复制光标所在的整行,插入到下一行 Tab 向右缩进。...,当缺一个匹配时,左侧一边会有一个问号提示，非常人性化 14. autofilename 自动关联图片,css,js等资源路径插件 ?...Tagify, Tag 标签匹配,HTML/XML标签缩进、补全和校验 BracketHighlighter类似于代码匹配，可以匹配括号 autofilename自动关联图片,css,js等资源路径插件

    2K30

    水平列表组件实战：打造精美图片库 基础篇

    水平列表允许用户通过左右滑动浏览内容，在有限的屏幕空间内展示更多信息。...1.1 水平列表的应用场景应用场景说明图片库展示照片集合，用户可以左右滑动浏览商品推荐在电商应用中展示推荐商品视频列表展示视频缩略图，用户可以选择感兴趣的视频卡片集合展示信用卡、会员卡等卡片信息横向导航作为应用内的横向导航菜单...1.2 水平列表与垂直列表的区别特性水平列表垂直列表滚动方向左右滚动上下滚动适用场景图片展示、横向导航长列表数据、聊天记录实现方式设置listDirection为Axis.Horizontal默认为Axis.Vertical...多行支持可通过lanes属性设置多行单列多行二、水平列表实战案例在本案例中，我们将实现一个水平方向的图片库，展示风景照片及其标题。...四、完整代码解析让我们来看一下完整的代码实现：@Componentexport struct HorizontalList { // 图片数据 private images: Image[]

    36500

    自实现PC端jQuery版轮播图

    ，后来想了想，就不引入它了，免得又得增加依次一次网络请求，项目里既然已经用到了jQuery，那就索性用jQuery写一个轮播图吧。...现在把自己写的轮播图这块代码单独拿出来，做一个小demo写在这里记录一下（demo中轮播图的图片网上随意找的） 实现的效果： 　　　　1、自动轮播（轮播时间间隔在js代码中自定义） 　　　　2、点击左右侧按钮...，实现手动切换 　　　　3、底部小圆点根据切换图片的位置相应的显示active状态 　　　　4、鼠标经过轮播图区域，停止轮播，离开轮播图区域开始轮播 代码目录结果如下： 一、index.html 注：这里以...注：js代码中，每个变量均已给了注释。...但是注意在向左侧滚动的时候，滚动到最后一张图图片后，再次切换时就不要用stop(false,true)，而是要瞬间定位到第一张图片（其实是dom结构中的第二张）的位置，同样，向右侧滚动时，当滚动到第一张图片后

    10.5K20

    自己实现PC端jQuery版轮播图

    ，后来想了想，就不引入它了，免得又得增加依次一次网络请求，项目里既然已经用到了jQuery，那就索性用jQuery写一个轮播图吧。...现在把自己写的轮播图这块代码单独拿出来，做一个小demo写在这里记录一下（demo中轮播图的图片网上随意找的） 实现的效果： 　　　　1、自动轮播（轮播时间间隔在js代码中自定义） 　　　　2、点击左右侧按钮...，实现手动切换 　　　　3、底部小圆点根据切换图片的位置相应的显示active状态 　　　　4、鼠标经过轮播图区域，停止轮播，离开轮播图区域开始轮播 代码目录结果如下： 一、index.html 注：这里以...注：js代码中，每个变量均已给了注释。...但是注意在向左侧滚动的时候，滚动到最后一张图图片后，再次切换时就不要用stop(false,true)，而是要瞬间定位到第一张图片（其实是dom结构中的第二张）的位置，同样，向右侧滚动时，当滚动到第一张图片后

    12.3K100
    点击加载更多

    相关资讯

    热门标签

    更多标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      腾讯云开发者

      扫码关注腾讯云开发者

      扫码关注腾讯云开发者

      领取腾讯云代金券

      热门产品

      热门推荐

      更多推荐

      Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

      深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

      腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号

      领券