原生js层叠轮播

轮播图 基本上是每个网页必备的一个模块 那么下面就给大家分享一个层叠样式轮播图

 

先给大家看一下样式图：首先满足自动轮播，鼠标放上就会停止轮播，移除就会继续

要想写好一个轮播图，首先肯定是要把样式 布局写出来，废话不多说，直接放样式布局。

css可根据自己的需求去调整图片大小，以及位置，还有一些间隔比例

<style>
	* {
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.box {
		width: 1170px;
		height: 420px;
		position: relative;
		margin: 50px auto 0;
	}

	.box img {
		transition: all 0.5s linear;
	}

	.box ul {
		position: relative;
		width: 1170px;
		height: 420px;
	}

	.box ul li {
		height: 420px;
		width: 840px;
		position: absolute;
		top: 50%;
		/*过渡移动的动画*/
		transition: all 0.5s linear;
	}

	/*第一'五张盒子的位置*/
	.box ul .show0,
	.box ul .show4 {
		width: 504px;
		height: 252px;
		top: 50%;
		margin-top: -126px;
		z-index: 77;
	}

	.box ul .show0 {
		left: 0px;
	}

	.box ul .show4 {
		left: 666px;
	}

	/*一、五图片大小*/
	.show0 img,
	.show4 img {
		width: 504px;
		height: 252px;
	}

	/*二、四盒子的位置*/
	.box ul .show1,
	.box ul .show3 {
		width: 762px;
		height: 336px;
		top: 50%;
		margin-top: -168px;
		z-index: 88;
	}

	/*盒子距离*/
	.box ul .show1 {
		left: 82.5px;
	}

	.box ul .show3 {
		left: 325.5px;
	}

	/*第二、四张图片大小*/
	.show1 img,
	.show3 img {
		width: 762px;
		height: 336px;
	}

	/*第三张盒子的位置*/
	.box ul .show2 {
		width: 840px;
		height: 420px;
		left: 165px;
		top: 0%;
		z-index: 99;
	}

	/*图片大小*/
	.show2 img {
		height: 420px;
		width: 840px;
	}

	/*按钮位置*/
	.butL,
	.butR {
		position: absolute;
		width: 40px;
		height: 40px;
		background: url(teamdetails/l.png);
		top: 50%;
		margin-top: -20px;
		z-index: 999;
		cursor: pointer;
	}

	/*按钮位置*/
	.butL {
		left: 195px;
	}

	.butR {
		right: 195px;
		background-image: url(teamdetails/r.png);
	}
</style>

下面是布局：

<div class="box">
	<ul id="oul">
		<li class="show0"><img src="teamdetails/5.png" /></li>
		<li class="show1"><img src="teamdetails/1.png" /></li>
		<li class="show2"><img src="teamdetails/2.png" /></li>
		<li class="show3"><img src="teamdetails/3.png" /></li>
		<li class="show4"><img src="teamdetails/4.png" /></li>
	</ul>
	<div class="butL"></div>
	<div class="butR"></div>
</div>

所需图片放在最后。

接下来，讲一下js部分：讲解直接放在代码里面了，方便观察。

<script type="text/javascript">
	// 首先获取所需元素
	var box = document.querySelector(".box");
	var oli = document.querySelectorAll("#oul li");
	var butL = document.querySelector(".butL");
	var butR = document.querySelector(".butR");
	// 定义一个数组，按顺序放置标签类名，方便截取
	var lists = ["show0", "show1", "show2", "show3", "show4"];
	// 定义一个布尔类型的变量，用作防抖（简单理解 就是一段时间点击很多次 只执行一次）
	var flag = true;
	// 右按钮点击事件
	butR.onclick = function () {
		// 只有当flag为true时 点击事件才生效
		if (flag) {
			// 截取第一个 放在最后一位
			var first = lists.shift();
			lists.push(first);
			common();
		}
	};
	// 左按钮点击事件
	butL.onclick = function () {
		// 只有当flag为true时 点击事件才生效
		if (flag) {
			// 截取最后一个 放在第一位
			var last = lists.pop();
			lists.unshift(last);
			common();
		}
	};
	// 相同区域 （把按钮相同部分代码提取，便于修改）
	function common() {
		// 进来将flag赋值为false 避免多次点击 反应过慢
		flag = false;
		for (var i = 0; i < lists.length; i++) {
			// 更换类名 就相当于更换位置
			oli[i].className = lists[i];
		}
		// 设置一个延时器，经过0.5S后 将flag变为true
		setTimeout(function () {
			flag = true;
		}, 500);// 这里的500与上面css3动画时间保持一致
	}
	// 定义自动轮播函数
	function lunbo() {
		// 一直把第一个截取后 放到最后一个
		var first = lists.shift();
		lists.push(first);
		for (var i = 0; i < lists.length; i++) {
			// 类名也是如此 进行更换
			oli[i].className = lists[i];
		}
	}
	// 设置定时器 每3s进行一次轮播
	var timer = setInterval(lunbo, 3000);
	// 移入清除自动轮播
	box.onmouseenter = function () {
		clearInterval(timer);
	};
	// 移出继续自动轮播
	box.onmouseleave = function () {
		timer = setInterval(lunbo, 3000);
	};
</script>

以上就可以完成一个层叠轮播，希望你们能看得懂注释。

图片1-5自己下载就可

上面图片能看清吗 上下都有图片

也是初学的时候遇到的难题  把握好基础比什么都重要