1. Toy模板网首页
  2. >Toy博客

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

1年前作者：梁辰兴分类：Toy博客阅读(10)违法举报

这篇具有很好参考价值的文章主要介绍了在html中使用js实现图片的无缝滚动（四种状态）。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

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>

运行效果

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

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>

运行效果

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

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>

运行效果

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

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>

运行效果

在html中使用js实现图片的无缝滚动（四种状态）文章来源地址https://www.toymoban.com/news/detail-491283.html

到了这里，关于在html中使用js实现图片的无缝滚动（四种状态）的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处： 如若内容造成侵权/违法违规/事实不符，请点击违法举报进行投诉反馈，一经查实，立即删除！

分享到：
领支付宝红包赞助服务器费用

相关文章

  • 用纯HTML，JS，CSS实现横向滚动标签页

    用纯HTML，JS，CSS实现横向滚动标签页

    前不久，在我的一个项目中，需要展示一个横向滚动的标签页，它支持鼠标横向拖动和点击切换。在实现的过程中，我发现这个小功能需要同时用到前端的三辆马车，但是实现难度不高，而且最终效果还不错，是个难得的初学者项目，于是萌生了写这篇文章的想法，希望对初

    2024年02月08日
    浏览(24)

  • vue-seamless-scroll（一个简单的基于vue.js的无缝滚动）

    一般在数据可视化项目中经常会看到无缝滚动的表格，即轮播表，我们可以使用 vue-seamless-scroll 来实现，使用起来也很方便  vue-seamless-scroll官网：vue-seamless-scroll NPM  Yarn  PNPM  在实际项目中可能不止一个地方使用轮播表，所以我这里还是将其封装为单独一个组件可以复用，

    2024年02月16日
    浏览(16)

  • Vue3 实现一个无缝滚动组件（支持鼠标手动滚动）

    前言 在日常开发中，经常遇到需要支持列表循环滚动展示，特别是在数据化大屏开发中，无缝滚动使用频率更为频繁，在jquery时代，我们常用的无缝滚动组件为liMarquee，在vue中已经有vue-seamless-scroll组件（通过Vue2实现，不支持鼠标手动滚动），但是在使用过程中，发现滚动后

    2024年02月08日
    浏览(17)
  • css3 实现文字横幅无缝滚动

    css3 实现文字横幅无缝滚动

    使用 css3 关键帧 @keyframes 和 animation 属性实现文字横幅无缝滚动。

    2024年02月13日
    浏览(12)

  • css3实现无缝滚动，鼠标经过暂停

    js也可以实现，但css3更加的平滑和资源占用更少。下面是具体代码，动画要单独用一个类名，否则暂停估计不会生效： 原理：动画向上移动，目标完全消失后，从头开始，注意 动画移动高度是文本高度，这个不好控制要微调，如果文本是动态的则要把动画通过js生成动态设置

    2024年02月22日
    浏览(17)
  • Flutter vs 前端 杂谈：SliverAppBar、手动实现Appbar、前端Html+JS怎么实现滚动变化型Appbar - 比较

    Flutter vs 前端 杂谈：SliverAppBar、手动实现Appbar、前端Html+JS怎么实现滚动变化型Appbar - 比较

    Flutter vs 前端 杂谈 SliverAppBar的弹性背景的显隐效果使用Html+JS怎么实现 作者 ： 李俊才 （jcLee95）：https://blog.csdn.net/qq_28550263 邮箱 ： 291148484@163.com 本文地址 ：https://blog.csdn.net/qq_28550263/article/details/134149018 在 Flutter 中，最简单的 appbar 就是 Appbar 组件，它没有任何难点，任何刚

    2024年02月05日
    浏览(46)
  • 用 React+ts 实现无缝滚动的走马灯

    用 React+ts 实现无缝滚动的走马灯

    走马灯是一种常见的网页交互组件，可以展示多张图片或者内容，通过自动播放或者手动切换的方式，让用户能够方便地浏览多张图片或者内容。 本次实现的不是轮播图而是像传送带一样的无限滚动的形式。 走马灯可设置一下属性： 滚动速度 滚动方向 一屏要显示项的个数

    2024年02月13日
    浏览(10)
  • 【CSS文字滚动】CSS实现文字横向循环无缝滚动，鼠标移入暂停移出继续（附实测源码）

    【CSS文字滚动】CSS实现文字横向循环无缝滚动，鼠标移入暂停移出继续（附实测源码）

    CSS实现文字横向循环无缝滚动，鼠标移入暂停移出继续 【写在前面】故事的起源还得从客户现场的一个问题说起，前段时间总有客户现场反馈，你们的系统用着用着就会出现卡住的状态，导致页面无响应，一开始我以为是内存的问题，后面深入才发现是CPU消耗太多的问题，核

    2024年02月02日
    浏览(15)
  • 【快速阅读三】使用泊松融合实现单幅图的无缝拼贴及消除两幅图片直接的拼接缝隙。

    【快速阅读三】使用泊松融合实现单幅图的无缝拼贴及消除两幅图片直接的拼接缝隙。

    在【快速阅读二】从OpenCv的代码中扣取泊松融合算子（Poisson Image Editing）并稍作优化 一文的最后，我曾经提到有个使用泊松融合来来实现Seamless Tiling的效果，我自己尝试去实现，暂时没有获取正确的结果，论文里给出的效果如下：                                    

    2024年01月19日
    浏览(16)
  • 小程序swiper一个轮播显示一个半内容且实现无缝滚动

    小程序swiper一个轮播显示一个半内容且实现无缝滚动

       

    2024年02月12日
    浏览(15)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包，优惠每天领

二维码1

领取红包

二维码2

领红包