原生js，DOM节点的增删方法实现，多个图片的轮播

首先介绍一下这个小demo的功能。

demo的页面构成：

页面中间有多个同样大小的图片，在图片群的左右两侧有左右方向播动的可点击钮，图片群就会往左侧翻转，并且在最后一张图片的时候，第一张图片就会继续出现在最后一张图片，属于无裂痕翻转。右侧按钮也是同样。

实现逻辑：

左侧按钮，通过获取图片所在上一级（父级）目录，对出现在最左侧的第一个child用removeChild()方法删除第一个，然后将删除的该子元素添加到父级元素的最后，每次点击事件就会重复前面操作。

代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>轮番图</title>
		<style>
			* {
				padding: 0;
				margin: 0;
			}
			
			ul {
				list-style: none;
				margin: 50px auto;
				display: inline-block;
				margin-left: 35px;
			}
			
			ul li {
				display: inline-block;
				float: left;
			}
						
			.wrapper {
				width: 880px;
				height: 880px;
				margin: 50px auto;
				background-color: azure;
				border: 1px gainsboro dotted;
			}
			
			.btn01 {
				float: left;
				margin-left: 30px;
				margin-top: 70px;
			}
			
			.btn02 {
				float: right;
				margin-right: 30px;
				margin-top: 70px;
			}
		</style>
	</head>
	<body>
		<div class="wrapper">
			<ul id="sliderBox">
				<li><img src="img/photo1.jpg" alt="" /></li>
				<li><img src="img/photo2.jpg" alt="" /></li>
				<li><img src="img/photo3.jpg" alt="" /></li>
				<li><img src="img/photo4.jpg" alt="" /></li>
				<li><img src="img/photo5.jpg" alt="" /></li>
				<li><img src="img/photo6.jpg" alt="" /></li>
				<li><img src="img/photo7.jpg" alt="" /></li>
				<li><img src="img/photo8.jpg" alt="" /></li>
			</ul>
			<div class="btn01" onclick="leftArrow()"><img src="img/leftArrow.jpg"/></div>
			<div class="btn02" onclick="rightArrow()"><img src="img/rightArrow.jpg"/></div>
		</div>
	</body>
	<script>
		function leftArrow() {
			var parent = document.getElementById("sliderBox");
			var children = parent.getElementsByTagName("li");
			var firstChild = children[0];
			var tmp = firstChild;
			parent.removeChild(firstChild);
			parent.appendChild(tmp);
		}
		
		function rightArrow() {
			var parent = document.getElementById("sliderBox");
			var children = parent.getElementsByTagName("li");
			var lastChild = children[children.length-1];
			var tmp = lastChild;
			parent.removeChild(lastChild);
			parent.insertBefore(tmp,children[0]);
		}
	</script>
</html>

实现效果：

（初始化效果）

（点击左侧按钮：点击一次）

（点击左侧按钮：点击二次）

（点击右侧按钮：继续上面操作，点击一次）

PS:页面图片纯属在网上抓取，并未有恶意，单纯学习。

下面是轮播图素材，如果懒的去网络扒图，可以下载：

khttps://pan.baidu.com/s/1GlVj1hsMsDUAFALqKNBCOQ 密码：lnhx

原生js，DOM节点的增删方法实现，多个图片的轮播

猜你喜欢