萌新项目人 2018-09-03 04:57 采纳率: 100%
浏览 997
已采纳

有没有什么方法能让网页整体的左右循环滚动

就是说，页面整体宽度是超出浏览器宽度的，让这个页面自动从左侧滚到右，再滚回来，这么循环滚动

  • 写回答

3条回答 默认 最新

  • 斯洛文尼亚旅游 2018-09-03 05:50
    关注
     <!doctype html>
<style>body{margin:0}</style>
<div>111<script>document.write('123456789'.repeat('30'))</script></div>
<script>
    var root = document.compatMode == 'CSS1Compat' ? 'documentElement' : 'body'
        , clientWidth = document[root].clientWidth, scrollWidth = document[root].scrollWidth
        , step = 100, delay = 200;
    window.onresize = function () { clientWidth = document[root].clientWidth; scrollWidth = document[root].scrollWidth }
    if (scrollWidth > clientWidth) setInterval(function () {
        document[root].scrollLeft += step;
        if (document[root].scrollLeft >= scrollWidth - clientWidth || document[root].scrollLeft == 0) step = -step;
    }, delay)
</script>
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(2条)

报告相同问题？

  • 6屏左右循环滚动图片代码.rar
    2019-07-04 23:42
    标题中的“6屏左右循环滚动图片代码”是指一种JavaScript实现的网页动态效果，它能够将多张图片在六个屏幕上进行左右循环滚动展示，通常用于创建视觉吸引力强的图片展示区域，比如网站的轮播图或者产品展示部分。...
  • 前端实现网页合作伙伴logo滚动墙实现，垂直轮播淡入淡出效果
    2025-05-23 16:22
    奥特奇趣蛋的博客 然后继续调用delay将第一组图片整体让在页面显示规定的时间后，就执行淡出动画了 淡出：淡入动画执行完毕后logoStates响应式变量中元素全部被改为了enter，然后下面就是继续循环logoStates将里面的全部元素循环替换...
  • 前端网页开发学习（HTML+CSS+JS）有这一篇就够！
    2024-06-20 12:47
    一颗小谷粒的博客 本篇文章详细总结了前端网页开发的三大必备语言：Html、css和Javascript，内容精炼且易懂，适合新手学习和期末复习！（八千字总结）
  • 用html把图片整体往左挪动,网页制作如何让图片从左到右循环移动
    2021-06-09 08:43
    Elodin的博客 满意答案tyler5692015.11.03采纳率：51%等级：7已帮助：460人网页制作(HTML)让图片从左到右循环移动使用 css +js完成。例如：从左向右循环移动图片向右循环滚动var speed = 30;demo2.innerHTML = demo1.innerHTML;...
  • JavaScript实现滚动栏效果的方法
    2020-10-24 07:50
    在现代网页设计中，动态且流畅的滚动栏效果是吸引用户的重要手段之一。...通过细致地调整和优化DOM操作和事件处理逻辑，我们可以让网页元素的滚动表现得更加自然、流畅，从而提升整体的交互品质和视觉吸引力。
  • 前端页面 qq音乐 轮播图
    2021-04-23 14:49
    在前端开发领域，轮播图（Carousel）是一种常见的网页元素，用于展示一组可滑动的图片或内容。QQ音乐作为一款流行的在线音乐平台，其前端页面中的轮播图设计是吸引用户注意力、传递信息的重要手段。本文将深入探讨...
  • 实现全屏图片左右滚动的JavaScript教程
    2024-10-26 09:26
    红廉骑士兽的博客 简介：通过JavaScript实现图片左右整屏滚动是一种网页动态效果，适用于产品展示或图片轮播。本文详细说明了如何实现这一功能，包括HTML结构的创建、CSS样式的应用以及JavaScript事件监听器的绑定。实现过程中需要...
  • fly-barrage 前端弹幕库（3）：滚动弹幕的设计与实现
    2024-03-01 22:51
    纷飞丿的博客 今天和大家说说滚动弹幕的设计与实现，为了便于理解，我会由简到难的一步步解析说明，主要包括以下几块内容： - 实现一条滚动弹幕的计算与渲染； - 实现多条滚动弹幕的计算与渲染； - 实现多条滚动弹幕相同字号...
  • Web前端：打造不间断滚动图片特效
    2025-06-03 21:41
    你踩到我法袍了的博客 JavaScript是一种高级的、解释型的编程语言，由Netscape公司创建，最初用于网页交互，现在已经成为Web开发的三大核心技术之一。它是一种轻量级的脚本语言，主要运行在客户端即用户的浏览器中，允许开发者为网页添加...
  • 适合左右全屏的左右滚动图片代码
    2020-06-11 07:39
    在网页设计中，为了提供良好的用户体验，特别是在展示大量图片或者需要滑动浏览的内容时，左右滚动图片的效果变得越来越常见。这种效果可以使用户在不改变浏览器窗口大小的情况下，平滑地在图片之间进行导航，保持...
  • 没有解决我的问题, 去提问