原生js实现简单的轮播图

最新推荐文章于 2024-06-12 12:52:53 发布

无心的空白

最新推荐文章于 2024-06-12 12:52:53 发布

阅读量108

点赞数

分类专栏：原生js 文章标签： css html5 html js

本文链接：https://blog.csdn.net/m0_55240753/article/details/120295130

版权

原生js 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

（都是最简单的实现过程，后续会继续优化，代码直接复制，把路径配好就能看到效果了）直接上代码：

<!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>Document</title>
		<style>
			* {
				margin: 0;
				padding: 0;
			}

			.maxBox {
				width: 600px;
				height: 400px;
				margin: 20px auto;
				/* 添加相对定位   便于后面的子元素使用绝对定位 */
				position: relative;
			}

			#imgs {
				width: 600px;
				height: 400px;
				display: flex;
				/* 超出隐藏 */
				overflow: hidden;
			}

			#imgs>img {
				width: 600px;
				height: 400px;
				/* 添加过渡 */
				transition: all 2s;
			}
		</style>
	</head>

	<body>
		<!-- 定义一个大盒子，用于存放轮播的所有东西 -->
		<div class="maxBox" id="maxBox">
			<!-- 用于存放图片盒子 -->
			<div id="imgs">
				<img src="./img/z1.jpg" alt="图片一">
				<img src="./img/z2.jpg" alt="图片二">
				<img src="./img/z3.jpg" alt="图片三">
				<img src="./img/z4.jpg" alt="图片四">
				<img src="./img/z5.jpg" alt="图片五">
			</div>
		</div>
		<script>
			// 获取到最大的盒子
			let maxBox = document.getElementById("maxBox");
			// 获取到存放图片的盒子
			let imgBox = document.getElementById("imgs");
			// 图片切换函数
			function lunbo() {
				// 获取到所有的图片
				let imgs = imgBox.children;
				// 获取到第一张图片
				let firstImg = imgs[0];
				// 把第一张的左边距设置等同于负的图片宽度的距离
				firstImg.style.marginLeft = -600 + "px";
				// 使用延时调用的方法 2s后调用里面的函数
				let delays = setTimeout(function() {
					// 删除第一张图片
					imgBox.removeChild(firstImg);
					// 将第一张的左边距设为0
					firstImg.style.marginLeft = "0px";
					// 将取出的第一张图片添加到最后面
					imgBox.appendChild(firstImg);
					// 清除延时调用
					clearTimeout(delays);
				}, 2000);
			}
			// 声明一个全局的值为null的变量用于后面接收定时调用
			let timing = null;
			// 当页面加载完成时 每隔2s调用一次轮播函数
			// 定时调用方法 setInterval()
			window.onload = function() {
				timing = setInterval(lunbo, 2000);
			}
			// 当鼠标移入大盒子的时候停止调用轮播函数
			maxBox.addEventListener("mouseover", function() {
				clearInterval(timing);
			});
			// 当鼠标移出大盒子的时候继续调用轮播函数
			maxBox.addEventListener("mouseout", function() {
				timing = setInterval(lunbo, 2000);
			});
		</script>
	</body>

</html>

链接图片如下：

无心的空白

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
原生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
复制链接

扫一扫