在html中使用js实现图片的无缝滚动（四种状态）

news2024/11/24 4:36:10

文章目录

  • js原理
  • 实施任务
    • 1.从左往右无缝滚动
      • 代码示例
      • 运行效果
    • 2.从右往左无缝滚动
      • 代码示例
      • 运行效果
    • 3.从上往下无缝滚动
      • 代码示例
      • 运行效果
    • 4.从下往上无缝滚动
      • 代码示例
      • 运行效果

js原理

获取整个ul和ul下面的所有li， 把ul里面的li内容添加一份，因为需要完成图片滚动效果所以需要二份完成无缝对接， 定义初始速度。

设置定时器 在定时中进行判断 实现原理：因为ul是跟着父元素div进行定位的，所以ul的offsetleft的值初始值为0。

只需要改变ul的left值就可以完成滚动效果 当ul的offsetleft值大于0的时候说明图片正在向右滚动，此时只需要把当前left值变成整个盒子的一半。

并且将盒子定位到左边一半的位置就能完成滚动中的无缝对接。

当uL的offset值小于负的此时盒子一半，说明盒子正在向左移动，完成滚动的一半时，则需要将此时的ul回到最初的位置。

每走一次定时器，将left的值添加定义的初始速度，完成滚动。

获取上方两个左右滚动，因为第一个是向左滚动，只需要将此时的初始速度变成负数。

实施任务

1.从左往右无缝滚动

代码示例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style>
body, div, ul, li, p {
	padding: 0;
	margin: 0;
}

#div1 {
	position: relative;
	margin: 10px auto;
	border: 1px solid black;
	width: 680px;
	height: 170px;
	overflow: hidden;
}

#div1 ul {
	position: absolute;
	left: 0;
}

#div1 ul li {
	float: left;
	padding: 10px;
	list-style: none;
	width: 150px;
	height: 150px;
}

#div1 ul li img {
	width: 150px;
	height: 150px;
}
	</style>
	<body>
		<div id="div1">
			<ul>
				<li>
					<img src="../img/img/1.jpeg" alt="">
				</li>
				<li>
					<img src="../img/img/2.jpeg" alt="">
				</li>
				<li>
					<img src="../img/img/3.jpeg" alt="">
				</li>
				<li>
					<img src="../img/img/4.jpeg" alt="">
				</li>
				<li>
					<img src="../img/img/5.jpeg" alt="">
				</li>
				<li>
					<img src="../img/img/6.jpeg" alt="">
				</li>
			</ul>
		</div>
		<script type="text/javascript">
			window.onload = function() {
				var oDiv = document.getElementById("div1");
				var oUl = document.getElementsByTagName("ul")[0];
				var oLi = document.getElementsByTagName("li");
				var oA = document.getElementsByTagName("a");
				var timer = null;
				var iSpeed = 8;
				//复制一遍ul
				oUl.innerHTML += oUl.innerHTML;
				//ul的宽度是所有li宽度之和，复制ul之后的整个ul的宽度就是li的长度乘以一个li的宽度
				oUl.style.width = oLi.length * oLi[0].offsetWidth + "px";

				function fnMove() {
					//图片向左移动时的条件，即在div里的ul的offsetLeft小于一个ul的宽度
					if (oUl.offsetLeft < -oUl.offsetWidth / 2) {
						//将整个复制的ul向右拖拽直至整个ul中的第一张图归位到起点
						oUl.style.left = 0;
					}
					//图片向右移动时的条件，即在div里的ul的offsetLeft大于等于0
					else if (oUl.offsetLeft >= 0) {
						//将整个复制的ul向左拖拽直至整个ul中的第一张图归位到起点
						oUl.style.left = -oUl.offsetWidth / 2 + "px";
					}
					//给ul一个速度让整个ul的offsetLeft增加或减少，速度为正则向右移动，速度为负则向左移动
					oUl.style.left = oUl.offsetLeft + iSpeed + "px";
				}
				    //从左往右
					iSpeed = 8;
					//自动滚动
					timer = setInterval(fnMove, 30);
				//当鼠标移动到div里面的时候图片滚动暂停，此时清除定时器即可。
				oDiv.onmouseover = function() {
					clearInterval(timer);
				}
				//当鼠标移出div的时候图片继续滚动，此时重新加载定时器。
				oDiv.onmouseout = function() {
					timer = setInterval(fnMove, 30);
				}
			}
		</script>
	</body>
</html>

运行效果

在这里插入图片描述

2.从右往左无缝滚动

代码示例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style>
body, div, ul, li, p {
	padding: 0;
	margin: 0;
}

#div1 {
	position: relative;
	margin: 10px auto;
	border: 1px solid black;
	width: 680px;
	height: 170px;
	overflow: hidden;
}

#div1 ul {
	position: absolute;
	left: 0;
}

#div1 ul li {
	float: left;
	padding: 10px;
	list-style: none;
	width: 150px;
	height: 150px;
}

#div1 ul li img {
	width: 150px;
	height: 150px;
}
	</style>
	<body>
		<div id="div1">
			<ul>
				<li>
					<img src="../img/img/1.jpeg" alt="">
				</li>
				<li>
					<img src="../img/img/2.jpeg" alt="">
				</li>
				<li>
					<img src="../img/img/3.jpeg" alt="">
				</li>
				<li>
					<img src="../img/img/4.jpeg" alt="">
				</li>
				<li>
					<img src="../img/img/5.jpeg" alt="">
				</li>
				<li>
					<img src="../img/img/6.jpeg" alt="">
				</li>
			</ul>
		</div>
		<script type="text/javascript">
			window.onload = function() {
				var oDiv = document.getElementById("div1");
				var oUl = document.getElementsByTagName("ul")[0];
				var oLi = document.getElementsByTagName("li");
				var oA = document.getElementsByTagName("a");
				var timer = null;
				var iSpeed = 8;
				//复制一遍ul
				oUl.innerHTML += oUl.innerHTML;
				//ul的宽度是所有li宽度之和，复制ul之后的整个ul的宽度就是li的长度乘以一个li的宽度
				oUl.style.width = oLi.length * oLi[0].offsetWidth + "px";

				function fnMove() {
					//图片向左移动时的条件，即在div里的ul的offsetLeft小于一个ul的宽度
					if (oUl.offsetLeft < -oUl.offsetWidth / 2) {
						//将整个复制的ul向右拖拽直至整个ul中的第一张图归位到起点
						oUl.style.left = 0;
					}
					//图片向右移动时的条件，即在div里的ul的offsetLeft大于等于0
					else if (oUl.offsetLeft >= 0) {
						//将整个复制的ul向左拖拽直至整个ul中的第一张图归位到起点
						oUl.style.left = -oUl.offsetWidth / 2 + "px";
					}
					//给ul一个速度让整个ul的offsetLeft增加或减少，速度为正则向右移动，速度为负则向左移动
					oUl.style.left = oUl.offsetLeft + iSpeed + "px";
				}
				    //从右往左
					iSpeed = -8;
					//自动滚动
					timer = setInterval(fnMove, 30);
				//当鼠标移动到div里面的时候图片滚动暂停，此时清除定时器即可。
				oDiv.onmouseover = function() {
					clearInterval(timer);
				}
				//当鼠标移出div的时候图片继续滚动，此时重新加载定时器。
				oDiv.onmouseout = function() {
					timer = setInterval(fnMove, 30);
				}
			}
		</script>
	</body>
</html>

运行效果

在这里插入图片描述

3.从上往下无缝滚动

代码示例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>无缝滚动_从上往下</title>
	</head>
	<style>
body, div, ul, li, p {
	padding: 0;
	margin: 0;
}

#div1 {
	position: relative;
	margin: 50px auto;
	border: 1px solid black;
	width: 170px;
	height: 680px;
	overflow: hidden;
}

#div1 ul {
	position: absolute;
	left: 0;
}

#div1 ul li {
	float: left;
	padding: 10px;
	list-style: none;
	width: 150px;
	height: 150px;
}

#div1 ul li img {
	width: 150px;
	height: 150px;
}
	</style>
	<body>
		<div id="div1">
			<ul>
				<li>
					<img src="../img/img/1.jpeg" alt="">
				</li>
				<li>
					<img src="../img/img/2.jpeg" alt="">
				</li>
				<li>
					<img src="../img/img/3.jpeg" alt="">
				</li>
				<li>
					<img src="../img/img/4.jpeg" alt="">
				</li>
				<li>
					<img src="../img/img/5.jpeg" alt="">
				</li>
				<li>
					<img src="../img/img/6.jpeg" alt="">
				</li>
			</ul>
		</div>
		<script type="text/javascript">
			window.onload = function() {
				var oDiv = document.getElementById("div1");
				var oUl = document.getElementsByTagName("ul")[0];
				var oLi = document.getElementsByTagName("li");
				var oA = document.getElementsByTagName("a");
				var timer = null;
				var iSpeed = 8;
				//复制一遍ul
				oUl.innerHTML += oUl.innerHTML;
				//ul的高度是所有li高度之和，复制ul之后的整个ul的高度就是li的长度乘以一个li的高度
				oUl.style.height = oLi.length * oLi[0].offsetHeight + "px";
		
				function fnMove() {
					//图片向上移动时的条件，即在div里的ul的offsetTop小于一个ul的高度
					if (oUl.offsetTop < -oUl.offsetHeight / 2) {
						//将整个复制的ul向下拖拽直至整个ul中的第一张图归位到起点
						oUl.style.top = 0;
					}
					//图片向下移动时的条件，即在div里的ul的offsetTop大于等于0
					else if (oUl.offsetTop >= 0) {
						//将整个复制的ul向上拖拽直至整个ul中的第一张图归位到起点
						oUl.style.top = -oUl.offsetHeight / 2 + "px";
					}
					//给ul一个速度让整个ul的offsetTop增加或减少，速度为正则向下移动，速度为负则向上移动
					oUl.style.top = oUl.offsetTop + iSpeed + "px";
				}
				    //从上往下
					iSpeed = 8;
					//自动滚动
					timer = setInterval(fnMove, 30);
				//当鼠标移动到div里面的时候图片滚动暂停，此时清除定时器即可。
				oDiv.onmouseover = function() {
					clearInterval(timer);
				}
				//当鼠标移出div的时候图片继续滚动，此时重新加载定时器。
				oDiv.onmouseout = function() {
					timer = setInterval(fnMove, 30);
				}
			}
		</script>
	</body>
</html>

运行效果

在这里插入图片描述

4.从下往上无缝滚动

代码示例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>无缝滚动_从下往上</title>
	</head>
	<style>
body, div, ul, li, p {
	padding: 0;
	margin: 0;
}

#div1 {
	position: relative;
	margin: 50px auto;
	border: 1px solid black;
	width: 170px;
	height: 680px;
	overflow: hidden;
}

#div1 ul {
	position: absolute;
	left: 0;
}

#div1 ul li {
	float: left;
	padding: 10px;
	list-style: none;
	width: 150px;
	height: 150px;
}

#div1 ul li img {
	width: 150px;
	height: 150px;
}
	</style>
	<body>
		<div id="div1">
			<ul>
				<li>
					<img src="../img/img/1.jpeg" alt="">
				</li>
				<li>
					<img src="../img/img/2.jpeg" alt="">
				</li>
				<li>
					<img src="../img/img/3.jpeg" alt="">
				</li>
				<li>
					<img src="../img/img/4.jpeg" alt="">
				</li>
				<li>
					<img src="../img/img/5.jpeg" alt="">
				</li>
				<li>
					<img src="../img/img/6.jpeg" alt="">
				</li>
			</ul>
		</div>
		<script type="text/javascript">
			window.onload = function() {
				var oDiv = document.getElementById("div1");
				var oUl = document.getElementsByTagName("ul")[0];
				var oLi = document.getElementsByTagName("li");
				var oA = document.getElementsByTagName("a");
				var timer = null;
				var iSpeed = 8;
				//复制一遍ul
				oUl.innerHTML += oUl.innerHTML;
				//ul的高度是所有li高度之和，复制ul之后的整个ul的高度就是li的长度乘以一个li的高度
				oUl.style.height = oLi.length * oLi[0].offsetHeight + "px";
		
				function fnMove() {
					//图片向上移动时的条件，即在div里的ul的offsetTop小于一个ul的高度
					if (oUl.offsetTop < -oUl.offsetHeight / 2) {
						//将整个复制的ul向下拖拽直至整个ul中的第一张图归位到起点
						oUl.style.top = 0;
					}
					//图片向下移动时的条件，即在div里的ul的offsetTop大于等于0
					else if (oUl.offsetTop >= 0) {
						//将整个复制的ul向上拖拽直至整个ul中的第一张图归位到起点
						oUl.style.top = -oUl.offsetHeight / 2 + "px";
					}
					//给ul一个速度让整个ul的offsetTop增加或减少，速度为正则向下移动，速度为负则向上移动
					oUl.style.top = oUl.offsetTop + iSpeed + "px";
				}
				    //从下往上
					iSpeed = -8;
					//自动滚动
					timer = setInterval(fnMove, 30);
				//当鼠标移动到div里面的时候图片滚动暂停，此时清除定时器即可。
				oDiv.onmouseover = function() {
					clearInterval(timer);
				}
				//当鼠标移出div的时候图片继续滚动，此时重新加载定时器。
				oDiv.onmouseout = function() {
					timer = setInterval(fnMove, 30);
				}
			}
		</script>
	</body>
</html>

运行效果

在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/53617.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

【加油站会员管理小程序】01需求分析

【加油站会员管理小程序】01需求分析

随着这两年微搭产品的迭代，目前组件基本够用，像常用的支付这种功能也是有的，因此我们就可以结合现有功能来完成一个实际使用的小程序的开发。 我们本次的实战课，是以加油站的业务场景为出发点，涵盖会员的开通、充值、消费、积分兑换等常用场景。结合实战案例，我们完整的…
阅读更多...
12月2日：thinkphp中的链式操作

12月2日：thinkphp中的链式操作

补充内容&#xff1a; 今天我们就来聊聊limit和page的区别以及group by需要注意的点&#xff0c;where和having的区别 limit和page 区别 Limit 限制查询数量&#xff0c;在进行分页查询的时候用的最多&#xff0c;但是limit在查询限制中的索引值是从0开始的&#xff0c;lim…
阅读更多...
基于Java+Springboot+Vue+elememt疫情返乡人员管控系统设计实现

基于Java+Springboot+Vue+elememt疫情返乡人员管控系统设计实现

博主介绍&#xff1a;✌全网粉丝20W,csdn特邀作者、博客专家、CSDN新星计划导师、java领域优质创作者,博客之星、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ &#x1f345;文末获取联系&#x1f345;精彩专栏推荐订阅收藏&#x1f447;&…
阅读更多...
一文搞懂如何学习Android内部命令行工具集合

一文搞懂如何学习Android内部命令行工具集合

目录 1.安卓命令工具集 2.命令如何使用&#xff08;举例&#xff09; 2.1 am命令使用 2.2 dumpsys 命令使用 2.3 wm命令用法 2.4 rm命令的用法 2.5 logcat 命令的用法 2.6 cat 命令的用法 3.个人如何学习 3.1 推荐学习方法一 3.2 方法二 1.安卓命令工具集 安卓支持…
阅读更多...
JMeter入门教程(7) --思考时间

JMeter入门教程(7) --思考时间

1.人物背景 在JMeter脚本中&#xff0c;思考时间使用定时器模拟实现的 2.任务目标 掌握基于JMeter性能测试脚本开发——思考时间 3.任务实操 3.1 固定定时器 右击取样器&#xff0c;选择“添加 > 定时器 > 固定定时器&#xff0c;如图示&#xff1a; 2.固定定时器页…
阅读更多...
手机无线耳机什么牌子的好用？2022好用的无线蓝牙耳机排行榜

手机无线耳机什么牌子的好用？2022好用的无线蓝牙耳机排行榜

现如今的蓝牙耳机市场中有着多种机型&#xff0c;不同功能&#xff0c;不同价格的蓝牙耳机数不胜数&#xff0c;一部手机、一副耳机似乎已经成为了人们外出的搭配。那么手机无线耳机什么牌子的好用呢&#xff1f;下面我来给大家推荐几款好用的无线蓝牙耳机&#xff0c;大家可以…
阅读更多...
团队协作利器----API接口Eolink

团队协作利器----API接口Eolink

本文目录&#xff1a;一、初识Eolink1.什么是Eolink2.我与Eolink的故事二、Eolink突出特点----团队协作协同工作分享协作支持所有类型API文档、测试方便导出接口文档方便查看历史记录三、Eolink优势总结前言&#xff1a; hello大家好&#xff0c;我是Dream&#xff0c;在我们的…
阅读更多...
安卓中adb命令工作的底层原理及使用举例

安卓中adb命令工作的底层原理及使用举例

目录 1. adb安卓调试桥 2.adb的组成 3.adb命令的使用举例: 3.1什么是应用包?什么是应用界面? 3.2 adb 命令如何获取应用应用包名和应用界面名? 1. adb安卓调试桥 adb的全称为Android Debug Bridge&#xff0c;就是起到调试桥的作用。通过adb我们可以在Eclipse中方便通过…
阅读更多...
c程序从编译开始到运行结束的过程

c程序从编译开始到运行结束的过程

重温c语言 我们在linux平台下建立一个a.c文件,程序很简单&#xff0c;显示输出Please input your name:&#xff0c;然后让我们输入名字&#xff0c;最后调用了一个子函数输出hello,我们的名字 #include<stdio.h>void hello(char * name);int main(){char name[16]{0};p…
阅读更多...
(4E)-TCO-PEG4-acid，1802913-21-8物理性质分享

(4E)-TCO-PEG4-acid，1802913-21-8物理性质分享

(4E)-TCO-PEG4-acid物理数据&#xff1a; CAS&#xff1a;1802913-21-8| 中文名&#xff1a;(4E)-反式环辛烯-四聚乙二醇-羧酸 | 英文名&#xff1a; (4E)-TCO-PEG4-acid 结构式&#xff1a; 英文别名&#xff1a; (4E)-TCO-PEG4-COOH TCO4-PEG4-COOH 中文别名&#xff1a…
阅读更多...
【Flink】一文解析Flink如何实现状态管理和容错机制

【Flink】一文解析Flink如何实现状态管理和容错机制

文章目录一 Flink中的状态管理1 有状态的算子和应用程序&#xff08;1&#xff09;算子状态&#xff08;operator state&#xff09;&#xff08;2&#xff09;键控状态&#xff08;keyed state&#xff09;2 状态后端3 选择一个状态后端二 Flink中的容错机制1 一致性检查点&am…
阅读更多...
自建传奇2服务器,分享自己架设传奇服务器的详细介绍

自建传奇2服务器,分享自己架设传奇服务器的详细介绍

我们在经历了太多的传奇私服之后就会有人想要自己搞一个来看看&#xff0c;其实有这样想法的人其实还是很多的&#xff0c;毕竟当一个玩家总没有当一个GM来的实在。于是就有人选择自己去架设传奇私服的服务器&#xff0c;而这个时候我们的信息就能够给这些想要自己当GM的人一个…
阅读更多...
uniapp多端问题总结

uniapp多端问题总结

页面跳转相关 1、页面跳转传参报错 问题&#xff1a; 小程序报错 SyntaxError: Unexpected end of JSON inputat JSON.parse () 原因&#xff1a;是由于JSON.parse无法识别某些url中的特殊字符比如&等特殊符号。解决办法&#xff1a; 原来代码&#xff1a; // 跳转所属专…
阅读更多...
【Linux】—一文掌握Linux基本命令（上）

【Linux】—一文掌握Linux基本命令（上）

目录lspwdcdtouchmkdirrmdir与rmmantree 的安装cpmvnano的安装catls 语法&#xff1a; ls [选项][目录或文件] 功能&#xff1a;对于目录&#xff0c;该命令列出该目录下的所有子目录与文件。对于文件&#xff0c;将列出文件名以及其他信息。 常用拓展选项&#xff1a; -a 列出…
阅读更多...
J-Tech Talk｜以型搜型：3D模型表征助力3D神经搜索！

J-Tech Talk｜以型搜型：3D模型表征助力3D神经搜索！

以型搜型指的是 以3D模型搜索3D模型&#xff0c;在对 3D 物体进行模型表征后&#xff0c;通过最近邻搜索得到与之类似的3D物体的结果。Executor-3d-encoder 项目集成了若干个 3D 物体表征模型&#xff0c;开发者可以很方便地对不同的模型进行统一配置、训练和微调。12 月 6 日晚…
阅读更多...
网上中国：“云签约”，真方便

网上中国：“云签约”，真方便

文章目录“云签约”&#xff0c;真方便足不出户就能签合同电子签名行业发展迅速确保合同不被篡改“云签约”&#xff0c;真方便 通过线上面签&#xff0c;商品房买卖双方不见面就能完成交易流程&#xff1b;有了电子劳务合同&#xff0c;企业用工实现一键签约&#xff1b;借助…
阅读更多...
体验 Node.js 的 net 模块

体验 Node.js 的 net 模块

1. 创建客户端 模拟 http 请求&#xff0c;将接收到的响应体内容原样输出&#xff0c;接收完毕后&#xff0c;关闭连接 1.1 最终效果 接收到的数据&#xff1a; 解析后的数据&#xff1a; 1.2 流程说明 初始化&#xff1a; 创建客户端 const client net.createConnection…
阅读更多...
美国高防服务器到底好不好用

美国高防服务器到底好不好用

对于对安全性配置有较高要求的用户来说&#xff0c;一般的独立服务器似乎并不能满足其需求。他们一般会选择带有DDoS或CC攻击防御功能或者流量清洗功能的高防服务器。而本文所要介绍的美国高防服务器也是众多海内外用户比较青睐的一大产品选择。那么美国高防服务器到底好不好用…
阅读更多...
设计原则和设计模式

设计原则和设计模式

一&#xff1a;软件设计原则 1.单一职责原则&#xff1a; 有且只有一个原因引起类的变化(类或者接口的职责单一化) 2.里氏替换原则&#xff1a; 子类可以扩展父类的功能,但不能改变父类原有的功能 3.依赖倒置原则&#xff1a; 1.高层模块不应该依赖于底层模块&#xff0c…
阅读更多...
机器学习2普通knn算法

机器学习2普通knn算法

文章目录KNN算法-k近邻算法&#xff08;k-Nearest Neighbors&#xff09;前言KNN优点&#xff1a;快捷键&#xff1a;一、普通knn算法是什么&#xff1f;解析&#xff1a;二、普通knn算法基础1.分布解析2.使用pycharm函数封装的形式运行KNN算法3.使用scikit-learn中的knn三、普…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023