【JS超简单轮播图】思路简单明了送给一起学习的小伙伴

本文链接：https://blog.csdn.net/qq_34261285/article/details/109905815

【JS超简单实现轮播图效果】

首先大牛互喷,由于只需要实现轮播的效果，样式的写法不着重讲解,也不注重写只是简单的搭个框架。本写法针对于知识比较薄弱的朋友，我对代码进行了多处备注希望能帮有需要的朋友解决一些不懂的知识点。文章可能存在多处错别字,能看懂就好。
废话少说上代码:

首先是HTML部分代码:仅截取body部分

<body>
	<!-- 准备大容器 -->
	<div class="max_box">
		<!-- 四个项目 -->
		<ul>
			<li class="item">1</li>
			<li class="item">2</li>
			<li class="item">3</li>
			<li class="item">4</li>
		</ul>
		<!-- 两个按钮 -->
		<button type="button" class="btn" id="pre">
			<</button> <button type="button" class="btn" id="next">>
		</button>
	</div>
	</body>

样式代码:

	* {
		padding: 0;
		margin: 0;
		transition: all .5s;
	}

	ul {
		list-style: none;
	}

	.max_box {
		position: relative;
		margin-left: 20px;
		margin-top: 20px;
		width: 420px;
		height: 120px;
		background-color: red;

	}

	.max_box ul {
		position: relative;
		width: 100%;
		height: 100%;
	}

	.max_box ul li {
		position: absolute;
		width: 100%;
		height: 100%;
		background: red;
	}

	.max_box ul li:nth-child(1) {
		background: palevioletred;
	}

	.max_box ul li:nth-child(2) {
		background: hotpink;
	}

	.max_box ul li:nth-child(3) {
		background: gold;
	}

	.max_box ul li:nth-child(4) {
		background: blue;



	}

	.btn {
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		z-index: 100000000;

	}

	.active {

		z-index: 10000;
	}

	#next {
		right: 0;
	}

最后是JS的代码: 文章不做注释在代码块中已经多处写了备注

var items = document.querySelectorAll('li'); //获取轮播的所有项
		var pre = document.getElementById('pre'); //获取上一张的按钮
		var next = document.getElementById('next'); //下一张按钮
		var index = 0; //创变量代表正在展示的图片 index将做为下标去访问items的每一项
		//clerActive函数会对items进行遍历 对单项items进行类赋值 让指定的item失去active类 也就是失去z-index属性 一旦失去这个属性那么显示的优先级会降级 获得该属性的那一项将优先展示  
		var clerActive = function () {
			for (var i = 0; i < items.length; i++) {
				items[i].className = 'item';
			}
		}
		//goIndex函数先执行 clerActive函数对类名进行处理 然后重新对items操作项重新进行类名赋值 让其获取active类 让这一项的优先级展示到最高
		var goIndex = function () {
			clerActive(); //执行清除函数
			items[index].className = 'item active'; //对items的需要操作项就行类名赋值 让那一项获取到 active类 也就是获得z-index 属性
		}
		//gonext函数主要作用于改变index的值 因为我们是通过 index做为下标去访问轮播图中的每一项
		var gonext = function () {
			if (index == 3) {//如果 index=3 那么证明不能继续往下 没有4号元素了
				index = 0;   //那么就让index=0 就是说 如果轮播的图片是最后一张 那么没有下一张图片展示 就重新跳到第一张 
			} else {//否则 如果当前展示的图片不是最后一张 当用户点击下一张 就让index加上1 显示下一张图片
				index++;//index + 1
			}
			goIndex(); //最后调用goIndex函数对当前项z-index 属性进行修改

		}
		//gopre 函数用于展示上一张 目的也是改变index的值 每行代码的意思参照gonext函数
		var gopre = function () { 
			if (index == 0) {
				index = 3;
			} else {
				index--;
			}
			goIndex();

		}
		//最后 我们对上一张和下一张的两个按钮分别加上监听 让其执行相对应的函数
		next.addEventListener('click', function () {
			gonext();//下一张按钮调用下一张函数
		})
		pre.addEventListener('click', function () {
			gopre();//上一张按钮调用上一张函数
		})