js实现向上、向下、向左、向右无缝滚动
向左滚动
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>无缝滚动向左滚动</title><style>* {margin: 0;padding: 0;}#wrapper {cursor: pointer;width: 600px;height: 200px;border: 1px solid pink;overflow: hidden;display: flex;margin: auto;}.scroll_content {display: flex;}#list,#list1 {display: flex;}.item {width: 200px;height: 200px;flex-shrink: 0;}.item img{width: 100%;}.item:nth-child(odd) {background: skyblue;}.item:nth-child(even) {background: yellow;}</style>
</head><body><!-- 外层盒子 --><div id="wrapper"><!-- 滚动盒子 --><div id="scroll_content" class="scroll_content"><!-- 列表1 --><div id="list"><div class="item"><img src="../imgs/city1.png" alt=""></div><div class="item"><img src="../imgs/city2.png" alt=""></div><div class="item"><img src="../imgs/city3.png" alt=""></div><div class="item"><img src="../imgs/city4.png" alt=""></div><div class="item"><img src="../imgs/city5.png" alt=""></div></div><!-- 复制一份 --><div id="list1"></div></div></div><script>window.onload = function () {var speed = 10;var tab = document.getElementById("wrapper");var tab1 = document.getElementById("list");var tab2 = document.getElementById("list1");tab2.innerHTML = tab1.innerHTML;function Marquee() {if (tab2.offsetWidth - tab.scrollLeft <= 0)tab.scrollLeft -= tab1.offsetWidthelse {tab.scrollLeft++;}}var MyMar = setInterval(Marquee, speed);tab.onmouseover = function () { clearInterval(MyMar) };tab.onmouseout = function () { MyMar = setInterval(Marquee, speed) };}</script>
</body></html>
向右滚动
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>无缝滚动向右滚动</title><style>* {margin: 0;padding: 0;}#wrapper {cursor: pointer;width: 600px;height: 200px;border: 1px solid pink;overflow: hidden;display: flex;margin: auto;}.scroll_content {display: flex;}#list,#list1 {display: flex;}.item {width: 200px;height: 200px;flex-shrink: 0;}.item img{width: 100%;}.item:nth-child(odd) {background: skyblue;}.item:nth-child(even) {background: yellow;}#list1 .item:last-child {background: red;}</style>
</head><body><!-- 外层盒子 --><div id="wrapper"><!-- 滚动盒子 --><div id="scroll_content" class="scroll_content"><!-- 列表1 --><div id="list"><div class="item"><img src="../imgs/city1.png" alt=""></div><div class="item"><img src="../imgs/city2.png" alt=""></div><div class="item"><img src="../imgs/city3.png" alt=""></div><div class="item"><img src="../imgs/city4.png" alt=""></div><div class="item"><img src="../imgs/city5.png" alt=""></div></div><!-- 复制一份 --><div id="list1"></div></div></div><script>window.onload = function () {var speed = 10;var tab = document.getElementById("wrapper");var tab1 = document.getElementById("list");var tab2 = document.getElementById("list1");tab2.innerHTML = tab1.innerHTML;function Marquee() {if (tab.scrollLeft <= 0) {tab.scrollLeft += tab2.offsetWidth}else {tab.scrollLeft--;}console.log(tab.scrollLeft, tab2.offsetWidth);}var MyMar = setInterval(Marquee, speed);tab.onmouseover = function () { clearInterval(MyMar) };tab.onmouseout = function () { MyMar = setInterval(Marquee, speed) };}</script>
</body></html>
向上滚动
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>向上滚动</title><style>* {margin: 0;padding: 0;}#wrapper {width: 200px;height: 600px;overflow: hidden;margin: 10px;}.item {width: 200px;height: 200px;}.item img{width: 100%;}.item:nth-child(odd) {background: skyblue;}.item:nth-child(even) {background: pink;}</style>
</head><body><div id="wrapper"><div class="scroll_content"><div id="list"><div class="item"><img src="../imgs/city1.png" alt=""></div><div class="item"><img src="../imgs/city2.png" alt=""></div><div class="item"><img src="../imgs/city3.png" alt=""></div><div class="item"><img src="../imgs/city4.png" alt=""></div><div class="item"><img src="../imgs/city5.png" alt=""></div></div><div id="list1"></div></div></div><script>var speed = 10; //数字越大速度越慢var wrapper = document.getElementById("wrapper");var list = document.getElementById("list");var list1 = document.getElementById("list1");list1.innerHTML = list.innerHTML; //克隆list为list1function Marquee() {if (list1.offsetTop - wrapper.scrollTop <= 0)wrapper.scrollTop -= list.offsetHeight else {wrapper.scrollTop++}}var MyMar = setInterval(Marquee, speed);wrapper.onmouseover = function () { clearInterval(MyMar) };wrapper.onmouseout = function () { MyMar = setInterval(Marquee, speed) };</script>
</body></html>
向下滚动
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>向下滚动</title><style>* {margin: 0;padding: 0;}#wrapper {width: 200px;height: 600px;overflow: hidden;margin: 10px;cursor: pointer;}.item {width: 200px;height: 200px;}.item img{width: 100%;}.item:nth-child(odd) {background: skyblue;}.item:nth-child(even) {background: pink;}</style>
</head><body><div id="wrapper"><div class="scroll_content"><div id="list"><div class="item"><img src="../imgs/city1.png" alt=""></div><div class="item"><img src="../imgs/city2.png" alt=""></div><div class="item"><img src="../imgs/city3.png" alt=""></div><div class="item"><img src="../imgs/city4.png" alt=""></div><div class="item"><img src="../imgs/city5.png" alt=""></div></div><div id="list1"></div></div></div><script>var speed = 10; //数字越大速度越慢var tab = document.getElementById("wrapper");var tab1 = document.getElementById("list");var tab2 = document.getElementById("list1");tab2.innerHTML = tab1.innerHTML; tab.scrollTop = tab.scrollHeightfunction Marquee() {if (tab1.offsetTop - tab.scrollTop >= 0)tab.scrollTop += tab2.offsetHeight else {tab.scrollTop--}}var MyMar = setInterval(Marquee, speed);tab.onmouseover = function () { clearInterval(MyMar) };tab.onmouseout = function () { MyMar = setInterval(Marquee, speed) };</script>
</body></html>
相关文章：
js实现向上、向下、向左、向右无缝滚动
向左滚动 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta http-equiv"X-UA-Compatible" content"IEedge"><meta name"viewport" content"widthdevice-width, ini…...
6 Hive引擎集成Apache Paimon
更多Paimon数据湖内容请关注：https://edu.51cto.com/course/35051.html 在实际工作中，我们通查会使用Flink计算引擎去读写Paimon，但是在批处理场景中，更多的是使用Hive去读写Paimon，这样操作起来更加方便。 前面我们…...
发布版本自动化记录版本功能方法
# 安装commitizennpm install --save-dev commitizen# 初始化Conventional Commits规范适配器npx commitizen init cz-conventional-changelog --save-dev --save-exact最后一步，需要在package.json中添加一个script"scripts": {..., // 此处省略其它配置…...
Elastic Stack 8.11：引入一种新的强大查询语言 ES|QL
作者：Tyler Perkins, Ninoslav Miskovic, Gilad Gal, Teresa Soler, Shani Sagiv, Jason Burns Elastic Stack 8.11 引入了数据流生命周期、一种配置数据流保留和降采样（downsampling） 的简单方法（技术预览版）…...
wx:for-item wx:for-index wx:for-key
wx:for-item wx:for-item , 数组当前项的变量名,默认为 item 作用：使用 （当前项变量名.属性名） 取得属性值每一项 <view wx:for"{{array}}"><view>{{item.name item.age }}</view> </view>等同于 &…...
老师还不会评课？这里有你需要的解决方案
优点： 1.课件制作: 老师的PPT设计得很新颖，插入的音乐视频都非常贴合课堂内容，看得出老师非常用心地进行了设计。 2.教师素养：老师的语言丰富、朗读能力很出色、板书设计很工整。 3.教师风格: xx老师上课激情澎湃/非常有亲和力…...
Talk | 马里兰大学博士生吴曦旸：分布式多智能体强化学习在复杂交通轨迹规划中的应用
本期为TechBeat人工智能社区第545期线上Talk！ 北京时间11月09日(周四)20:00，马里兰大学博士生—吴曦旸的Talk已准时在TechBeat人工智能社区开播！ 他与大家分享的主题是: “分布式多智能体强化学习在复杂交通轨迹规划中的应用”，介…...
2023年下半年架构案例真题及答案
案例的考点： 大数据架构 Lambda架构和Kappa架构 jwt特点 数据持久层，Redis数据丢失，数据库读写分离方案 Hibernat架构 SysML七个关系，填需求图 大数据的必选题： 某网作为某电视台在互联网上的大型门户入口&#…...
Java必考面试题，谈谈你对 Spring AOP 的理解
大家好，我是伍六七。 今天我们来学习 Spring 框架中最重要的概念之一：AOP。 这是一个 Java 程序员必考的面试题，大家好好理解。我们开始正文。 AOP 的概念 Spring AOP 是 Java 程序员们面试经常被问到的一个问题，但 AOP&#…...
BERT和ChatGPT简单对比
OpenAI发布了第一个版本的GPT（Generative Pretrained Transformer）模型在2018年6月。 谷歌的BERT模型（Bidirectional Encoder Representations from Transformers）是在2018年10月发布的。 BERT和ChatGPT都是由人工智能研究实验室…...
又一重要合作，创邻科技华为云联营产品正式发布
近日，创邻科技旗下的“Galaxybase高性能图平台”正式入驻华为云云商店联营商品，创邻科技成为华为云在数据库与缓存领域的联营联运合作伙伴。通过联营联运模式，双方合作能够深入产品、生态、解决方案等多个领域，助力各行业用户数字…...
PHP+Swoole应用示例
**Swoole是一个C编写的基于异步事件驱动和协程的并行网络通信引擎，为PHP提供高性能网络编程支持** ## ⚙️ 快速启动 可以直接使用 [Docker](https://github.com/swoole/docker-swoole) 来执行Swoole的代码，例如： bash docker run --rm php…...
3线硬件SPI+DMA驱动 HX8347 TFT屏
3线硬件SPIDMA驱动 HX8347 TFT屏，实现用DMA清屏。 参考：基于stm32 标准库spi驱动st7789彩屏TFT(使用DMA)-技术天地-深圳市修德电子有限公司 一、源码 HX8347.h #ifndef USER_HX8347_H_ #define USER_HX8347_H_#define SPI_hardware #define SPI_hardw…...
实验语音学的基本概念
语音学 实验语音学只是语音学的一个分支，那么语音学到底是研究什么的呢？我们先有一个大致了解。 语音学是研究语言声音体系的学科。语音学的任务是研究说明语音的性质，内部结构和单位，语音的分类和组合，语音的产生、…...
市场上ios签名公司做什么的？
iOS签名公司是提供iOS应用程序签名服务的公司。它们为开发者提供了一种简单的方式来将他们的应用程序发布到iOS设备上，同时也为用户提供了一种下载和安装这些应用程序的方法。这些公司提供的签名服务包括苹果企业签名和开发者签名，其中企业签名是为企业开…...
12. 一文快速学懂常用工具——docker 命令
本章讲解知识点 Docker 引擎Docker 常用命令Docker 生命周期详解Containerd 与 Docker 命令对比本专栏适合于软件开发刚入职的学生或人士，有一定的编程基础，帮助大家快速掌握工作中必会的工具和指令。本专栏针对面试题答案进行了优化，尽量做到好记、言简意赅。如专栏内容有错…...
API低代码开发应用场景
什么是API低代码开发平台 API低代码开发平台是一种基于低代码开发的技术平台，它可以帮助企业快速构建和部署API应用程序。该平台通过提供可视化的开发工具、预定义的组件和模板、自动化的代码生成等功能，使得开发者可以在不需要编写大量代码的情况下&am…...
从零开始搭建React+TypeScript+webpack开发环境-性能优化
前言 当我们开发React应用时，性能始终是一个重要的考虑因素。随着应用规模的增长，React组件的数量和复杂性也会相应增加，这可能会导致性能问题的出现。在这篇博文中，我们将探讨如何通过一系列的技巧和最佳实践来优化React应用的性…...
sCrypt 现在支持 Ordinals 了
比特币社区对 1Sat Ordinals 的接受度正在迅速增加，已有超过 4800 万个铭文被铸造，这一新创新令人兴奋不已。 尽管令人兴奋，但 Ordinals 铭文的工具仍然不发达，这使得使用 Ordinals 进行构建具有挑战性。 更具体地说，缺…...
乌班图搭建 LAMP
搭建 LAMP（Linux、Apache、MySQL、PHP）堆栈是在 Ubuntu 上构建 Web 服务器的常见任务。以下是一些步骤，指导如何在 Ubuntu 上搭建 LAMP 环境： 步骤： 更新系统软件包： 在终端中执行以下命令，确…...
日语AI面试高效通关秘籍：专业解读与青柚面试智能助攻
在如今就业市场竞争日益激烈的背景下，越来越多的求职者将目光投向了日本及中日双语岗位。但是，一场日语面试往往让许多人感到步履维艰。你是否也曾因为面试官抛出的“刁钻问题”而心生畏惧？面对生疏的日语交流环境，即便提前恶补了…...
基于FPGA的PID算法学习———实现PID比例控制算法
基于FPGA的PID算法学习 前言一、PID算法分析二、PID仿真分析1. PID代码2.PI代码3.P代码4.顶层5.测试文件6.仿真波形 总结 前言 学习内容：参考网站： PID算法控制 PID即：Proportional（比例）、Integral（积分&…...
Prompt Tuning、P-Tuning、Prefix Tuning的区别
一、Prompt Tuning、P-Tuning、Prefix Tuning的区别 1. Prompt Tuning（提示调优） 核心思想：固定预训练模型参数，仅学习额外的连续提示向量（通常是嵌入层的一部分）。实现方式：在输入文本前添加可训练的连续向量（软提示），模型只更新这些提示参数。优势：参数量少（仅提…...
C++：std::is_convertible
C++标志库中提供is_convertible，可以测试一种类型是否可以转换为另一只类型： template <class From, class To> struct is_convertible; 使用举例： #include <iostream> #include <string>using namespace std;struct A { }; struct B : A { };int main…...
可靠性+灵活性：电力载波技术在楼宇自控中的核心价值
可靠性灵活性：电力载波技术在楼宇自控中的核心价值 在智能楼宇的自动化控制中，电力载波技术（PLC）凭借其独特的优势，正成为构建高效、稳定、灵活系统的核心解决方案。它利用现有电力线路传输数据，无需额外布…...
渲染学进阶内容——模型
最近在写模组的时候发现渲染器里面离不开模型的定义，在渲染的第二篇文章中简单的讲解了一下关于模型部分的内容，其实不管是方块还是方块实体，都离不开模型的内容 🧱 一、CubeListBuilder 功能解析 CubeListBuilder 是 Minecraft Java 版模型系统的核心构建器，用于动态创…...
Psychopy音频的使用
Psychopy音频的使用 本文主要解决以下问题： 指定音频引擎与设备；播放音频文件 本文所使用的环境： Python3.10 numpy2.2.6 psychopy2025.1.1 psychtoolbox3.0.19.14 一、音频配置 Psychopy文档链接为Sound - for audio playback — Psy…...
css3笔记 （1） 自用
outline: none 用于移除元素获得焦点时默认的轮廓线 broder:0 用于移除边框 font-size：0 用于设置字体不显示 list-style: none 消除<li> 标签默认样式 margin: xx auto 版心居中 width:100% 通栏 vertical-align 作用于行内元素 / 表格单元格ÿ…...
优选算法第十二讲：队列 + 宽搜 优先级队列
优选算法第十二讲：队列 宽搜 && 优先级队列 1.N叉树的层序遍历2.二叉树的锯齿型层序遍历3.二叉树最大宽度4.在每个树行中找最大值5.优先级队列 -- 最后一块石头的重量6.数据流中的第K大元素7.前K个高频单词8.数据流的中位数 1.N叉树的层序遍历 2.二叉树的锯…...
Mac下Android Studio扫描根目录卡死问题记录
环境信息 操作系统: macOS 15.5 (Apple M2芯片)Android Studio版本: Meerkat Feature Drop | 2024.3.2 Patch 1 (Build #AI-243.26053.27.2432.13536105, 2025年5月22日构建) 问题现象 在项目开发过程中，提示一个依赖外部头文件的cpp源文件需要同步，点…...