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 环境： 步骤： 更新系统软件包： 在终端中执行以下命令，确…...
案例真题详解：Redis 主从复制~终于搞懂了
今天，我们以25年5月架构师的案例真题为引，来拆解下Redis主从复制的详细流程（当然你学了，拿去“吊打”面试官也是可以的）： 主从复制分为初始化阶段（全量同步）和运行阶段（增…...
终极图像处理指南：5分钟掌握Fiji科学图像分析技巧
终极图像处理指南：5分钟掌握Fiji科学图像分析技巧 【免费下载链接】fiji A "batteries-included" distribution of ImageJ :battery: 项目地址: https://gitcode.com/gh_mirrors/fi/fiji Fiji（Fiji Is Just ImageJ）是一款开…...
告别xml.etree：用Python正则表达式高效解析AUTOSAR ARXML文件（附完整代码）
用正则表达式重构AUTOSAR ARXML解析：工程师的高效实践指南 在汽车电子开发领域，AUTOSAR ARXML文件作为描述ECU通信架构的标准格式，其复杂性常常让工程师们头疼。传统XML解析方法在处理多层嵌套的ARXML结构时显得笨重且低效。本文将介绍一种基…...
面向车载冰箱高效可靠需求的功率器件选型策略与器件适配手册
随着车载出行场景的拓展与消费升级，车载冰箱已成为保障旅途生活品质的关键设备。其电源与压缩机驱动系统作为整机“能量心脏”，需在严苛的车载电气环境下实现高效、稳定、低噪声运行，功率器件的选型直接决定系统转换效率、热管理难度、EMC性能…...
别再手动写UI头文件了！Qt Designer的.ui文件一键生成.h的保姆级教程（附uic命令详解）
别再手动写UI头文件了！Qt Designer的.ui文件一键生成.h的保姆级教程（附uic命令详解） 在Qt开发中，界面设计与业务逻辑分离是提高开发效率的关键。然而，很多开发者在使用Qt Designer完成界面设计后，仍然手动编…...
ChanlunX缠论工具：3步实现股票技术分析的自动化革命
ChanlunX缠论工具：3步实现股票技术分析的自动化革命 【免费下载链接】ChanlunX 缠中说禅炒股缠论可视化插件 项目地址: https://gitcode.com/gh_mirrors/ch/ChanlunX 你是否还在为复杂的K线图分析而头疼？是否因为手工绘制缠论结构而浪费大量时间&…...
【2024最稀缺技术资产】：NVIDIA内部流出的CUDA 13 AI算子优化架构设计图（含Hopper H100专属GEMM融合路径）
第一章：CUDA 13 AI算子优化架构设计图的全局认知与技术定位CUDA 13 引入了面向AI工作负载深度定制的算子优化架构，其核心目标是弥合高层框架（如PyTorch、TensorFlow）与底层GPU硬件之间的语义鸿沟。该架构并非孤立的编译器升级&…...
别再死记硬背7条用例了！用‘开内闭外’法则5分钟搞定边界值测试（附实战案例）
边界值测试的极简法则：用"开内闭外"5分钟生成高覆盖率用例 第一次接触边界值测试时，我被那套"7条测试数据"的理论绕得头晕——为什么要测这么多？每个点到底代表什么？直到在一次项目复盘会上，看到资…...
别再只调RTC了！用STM32CubeIDE的RTC闹钟和唤醒功能，做个低功耗定时任务管理器
STM32CubeIDE实战：RTC闹钟与唤醒功能打造低功耗定时任务系统 在物联网和电池供电设备开发中，功耗优化往往成为决定产品成败的关键因素。想象一下，一个依靠纽扣电池运行的温湿度传感器，如果持续全速运转，可能几周就会耗…...
时，如何解决载波频率和协议解析的那些坑？)
避坑指南：在Proteus8中仿真51单片机红外通信(IRLINK)时，如何解决载波频率和协议解析的那些坑？
Proteus8仿真51单片机红外通信的五大核心陷阱与精准解决方案 当你在深夜调试Proteus8中的51单片机红外通信项目时，示波器上那些杂乱无章的波形是否曾让你陷入绝望？IRLINK模块看似简单，却暗藏诸多玄机。本文将从五个关键维度，解剖那…...