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 环境： 步骤： 更新系统软件包： 在终端中执行以下命令，确…...
CTF show Web 红包题第六弹
提示 1.不是SQL注入 2.需要找关键源码 思路 进入页面发现是一个登录框，很难让人不联想到SQL注入，但提示都说了不是SQL注入，所以就不往这方面想了 先查看一下网页源码，发现一段JavaScript代码，有一个关键类ctfs…...
Java 8 Stream API 入门到实践详解
一、告别 for 循环！ 传统痛点： Java 8 之前，集合操作离不开冗长的 for 循环和匿名类。例如，过滤列表中的偶数： List<Integer> list Arrays.asList(1, 2, 3, 4, 5); List<Integer> evens new ArrayList…...
电脑插入多块移动硬盘后经常出现卡顿和蓝屏
当电脑在插入多块移动硬盘后频繁出现卡顿和蓝屏问题时，可能涉及硬件资源冲突、驱动兼容性、供电不足或系统设置等多方面原因。以下是逐步排查和解决方案： 1. 检查电源供电问题 问题原因：多块移动硬盘同时运行可能导致USB接口供电不足&#x…...
鸿蒙中用HarmonyOS SDK应用服务 HarmonyOS5开发一个医院查看报告小程序
一、开发环境准备 工具安装： 下载安装DevEco Studio 4.0（支持HarmonyOS 5）配置HarmonyOS SDK 5.0确保Node.js版本≥14 项目初始化： ohpm init harmony/hospital-report-app 二、核心功能模块实现 1. 报告列表…...
WordPress插件：AI多语言写作与智能配图、免费AI模型、SEO文章生成
厌倦手动写WordPress文章？AI自动生成，效率提升10倍！ 支持多语言、自动配图、定时发布，让内容创作更轻松！ AI内容生成 → 不想每天写文章？AI一键生成高质量内容！多语言支持 → 跨境电商必备&am…...
分布式增量爬虫实现方案
之前我们在讨论的是分布式爬虫如何实现增量爬取。增量爬虫的目标是只爬取新产生或发生变化的页面，避免重复抓取，以节省资源和时间。 在分布式环境下，增量爬虫的实现需要考虑多个爬虫节点之间的协调和去重。 另一种思路：将增量判…...
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源文件需要同步，点…...
使用Spring AI和MCP协议构建图片搜索服务
目录 使用Spring AI和MCP协议构建图片搜索服务 引言 技术栈概览 项目架构设计 架构图 服务端开发 1. 创建Spring Boot项目 2. 实现图片搜索工具 3. 配置传输模式 Stdio模式（本地调用） SSE模式（远程调用） 4. 注册工具提…...
elementUI点击浏览table所选行数据查看文档
项目场景： table按照要求特定的数据变成按钮可以点击 解决方案： <el-table-columnprop"mlname"label"名称"align"center"width"180"><template slot-scope"scope"><el-buttonv-if&qu…...
Ubuntu系统多网卡多相机IP设置方法
目录 1、硬件情况 2、如何设置网卡和相机IP 2.1 万兆网卡连接交换机，交换机再连相机 2.1.1 网卡设置 2.1.2 相机设置 2.3 万兆网卡直连相机 1、硬件情况 2个网卡n个相机 电脑系统信息，系统版本：Ubuntu22.04.5 LTS；内核版本…...