jQuery实现一个3d轮播图

最新推荐文章于 2023-12-05 17:00:00 发布

闲云一鹤

最新推荐文章于 2023-12-05 17:00:00 发布

阅读量1k

点赞数

分类专栏：前端文章标签：轮播图 jquery

本文链接：https://blog.csdn.net/weixin_44312952/article/details/85320979

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

jQuery实现一个3d轮播图

index.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<link rel="stylesheet" type="text/css" media="screen" href="main.css" />
	<script type="text/javascript" src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
	<script type="text/javascript" src="main.js"></script>
	<title>slider3d</title>
</head>
<body>
	<div class="wapper">
		<ul class="imgs">
			<li class="li2" style="background:red"></li>
			<li class="li3" style="background:yellow"></li>
			<li class="li4" style="background:blue"></li>
			<li class="li5" style="background:gray"></li>
			<li class="li6" style="background:green"></li>
			<li class="li1" style="background:blueviolet"></li>
		</ul>
		<div class="points">
			<span class="on"></span>
			<span></span>
			<span></span>
			<span></span>
			<span></span>
			<span></span>
		</div>
	</div>
</body>
</html>

main.css

html, body {
	margin: 0;
	padding: 0;
	height: 100%;
}

ul {
	margin: 0;
	padding-left: 0;
}

.wapper {
	width: 1000px;
	height: 400px;
	margin: 0 auto;
	margin-top: 80px;
	position: relative;
	overflow: hidden;
}

.wapper ul {
	height: 367px;
	width: 100%;
	position: relative;
}

.wapper ul li {
	position: absolute;
	width: 600px;
	height: 367px;
	float: left;
	list-style: none;
	transition: 0.3s;
	cursor: pointer;
}

.li1 {
	transform: scale(0.66);
	transform-origin: 0 50%;
	z-index: 2;
	opacity: 1;
}
.li2 {
	transform: translateX(200px) scale(1);
	z-index: 3;
	opacity: 1;
}

.li3 {
	transform: translateX(400px) scale(0.66);
	transform-origin: 100% 50%;
	z-index: 2;
	opacity: 1;
}
.li4 {
	transform: translateX(200px) scale(0.66);
	z-index: 2;
	opacity: 0;
}
.li5 {
	transform: translateX(200px) scale(0.66);
	z-index: 2;
	opacity: 0;
}
.li6 {
	transform: translateX(200px) scale(0.66);
	z-index: 2;
	opacity: 0;
}
.arrow {
	position: absolute;
	z-index: 99;
	top: 50%;
	left: 0;
	right: 0;
	transform: translateY(-50%)
}

.arrow span {
	display: inline-block;
	font-size: 40px;
	color: #eeeeee;
}

.arrow span:hover {
	cursor: pointer;
	background: #000;
	opacity: 0.5;
}

.arrow span:last-child {
	float: right;
}
.points {
	text-align: center;
}

.points span {
	display: inline-block;
	background: #666;
	width: 30px;
	height: 3px;
	cursor: pointer;
}

.on {
	background: aquamarine !important;
}

main.js

/**
 * 3d轮播图的思想是样式的交换
 *
 *
 */


$(() => {
	/**
	 * cssList: 初始化时的样式数组，我们通过改变这个数组中的值的顺序来改变对应li的样式
	 * liList: 用于轮播的li列表
	 * container: 用于监听当前class为li1和li3的是否被点击
	 * points: 获取轮播图下的点列表
	 * index: 当前被激活的点
	 * timer: 计时器，用于启动和停止自动播放
	 */
	let cssList = ['li2', 'li3', 'li4', 'li5', 'li6', 'li1']
	let liList = $('ul.imgs li')
	let container = $('div.wapper')
	let points = $('div.points span')
	let index = 0
	let timer

	/**初始绑定下方点的点击 */
	points.map(item => {
		points.eq(item).hover(() => {
			//需要移动的次数是目标点和当前点的下标差值
			let n = item - index
			/**
			 * n>0时向后移动
			 * n<0时向前移动
			 * 移动次数是n次
			*/
			if (n < 0) {
				for( let i = 0; i < Math.abs(n); i++) {
					prev()
				}
			}
			if (n > 0) {
				for( let i = 0; i < n; i++) {
					next()
				}
			}
		} ,function(){})
	})

	/**移动到后一张 */
	next = () => {
		cssList.splice(0, 0, cssList[5]) //将最后一个样式复制插入到数组的第一个位置
		cssList.pop() //删除最后一个样式
		goChange()
		index ++
		if (index > 5) {
			index = 0
		}
		pointChange()
	}

	/**移动到前一张 */
	prev = () => {
		cssList.push(cssList[0]) //将第一个样式复制插入到最后位置
		cssList.shift() //删除第一个样式
		goChange()
		index --
		if (index < 0) {
			index = 5
		}
		pointChange()
	}

	/**
	 * 先重置所有点的样式
	 * 在改变激活的点的样式
	 */
	pointChange = () => {
		points.map(item => {
			points[item].className = ''
		})
		points[index].className = 'on'
	}

	/**
	 * 为每一个li重新设置样式，对应的是目前cssList
	 */
	goChange = () => {
		liList.map(item => {
			liList[item].className = cssList[item]
		})
	}

	/**
	 * 自动播放
	 */
	autoPlay = () => {
		timer = setInterval(() => {
			next()
		}, 2000)
	}

	/* autoPlay() */

	/**
	 * 当鼠标进入div.wapper时关闭自动播放
	 */
	container.mouseover(() => {
		clearInterval(timer)
	})

	/**
	 * 离开时启动
	 */
	container.mouseleave(() => {
		autoPlay()
	})

	/**
	 * 监听当前点击的是li1还是li3
	 * li1向前移动
	 * li3向后移动
	 */
	container.click((event) => {
		if (event.target.className === 'li3') {
			next()
		}

		if(event.target.className === 'li1') {
			prev()
		}
	})
})

闲云一鹤

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jQuery实现一个3d轮播图

jQuery实现一个3d轮播图目录jQuery实现一个3d轮播图index.htmlmain.cssmain.jsindex.html&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" conten
复制链接

扫一扫