使用js写个3d banner

最新推荐文章于 2020-09-03 14:43:57 发布

checkMa

最新推荐文章于 2020-09-03 14:43:57 发布

阅读量261

点赞数

分类专栏： js插件

本文链接：https://blog.csdn.net/qq_36990322/article/details/106250180

版权

js插件专栏收录该内容

12 篇文章 1 订阅

订阅专栏

要点

3d轮播简单写法也比较简单，控制3d效果有三个重要的属性，分别是scaleY (控制3d y轴缩放)，z-index (控制层级)，left(定位)；还有个transition(主要是设置动画时间等效果)；后面请看效果图及代码

图片

在这里插入图片描述

代码

<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title></title>
	<style>
		.banner-box {
			width: 400px;
			height: 200px;
			margin: 0 auto;
			border: 1px solid #ccc;
			position: relative;
		}

		.banner-box div {
			width: 200px;
			height: 150px;
			position: absolute;
			top: 25px;
			transition: .5s;
			cursor: pointer;
		}

		.banner-box div:nth-child(1) {
			/* 				left: 0px;
				z-index: 1; */
			background-color: #00FFFF;
			/* transform: scale3d(1,.8,1);	 */
		}

		.banner-box div:nth-child(2) {
			/* 			left: 50px;
				z-index: 2; */
			background-color: #CCCCCC;
			/* transform: scale3d(1,.9,1);	 */
		}

		.banner-box div:nth-child(3) {
			/* 				left: 100px;
				z-index: 3; */
			background-color: red;
			/* transform: scale3d(1,1,1);	 */
		}

		.banner-box div:nth-child(4) {
			/* 				left: 150px;
				z-index: 2; */
			background-color: black;
			/* transform: scale3d(1,.9,1);	 */
		}

		.banner-box div:nth-child(5) {
			/* 				left: 200px;
				z-index: 1; */
			background-color: gold;
			/* transform: scale3d(1,.8,1);	 */
		}

		.banner-box span {
			width: 20px;
			height: 40px;
			line-height: 40px;
			position: absolute;
			top: 80px;
			font-size: 20px;
			background: rgba(0, 0, 0, 0.2);
			text-align: center;
			color: #fff;
			z-index: 10;
			cursor: pointer;
			-webkit-user-select:none ;
		}

		.banner-box .left {
			left: 0;
		}

		.banner-box .right {
			right: 0;
		}
	</style>
</head>

<body>
	<div class="banner-box" id="banner-box">
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<span class="left"> &lt;</span>
		<span class="right"> &gt; </span>
	</div>
	<script type="text/javascript">
		var list = [
			"left: 0px; z-index: 1;  transform: scale3d(1,.8,1);",
			"left: 50px; z-index: 2;  transform: scale3d(1,.9,1);",
			"left: 100px; z-index: 3; transform: scale3d(1,1,1);",
			"left: 150px; z-index: 2;  transform: scale3d(1,.9,1);",
			"left: 200px; z-index: 1;  transform: scale3d(1,.8,1);"
		];
		var divList = document.querySelectorAll(".banner-box>div");

		function setListPop() {
			// 弹出数组最后一个值，从头进入
			var item = list.pop();
			list.unshift(item);
		}

		function setListShift() {
			// 弹出数组第一个值，从进入
			var item = list.shift();
			list.push(item);
		}

		function setStyle() {
			for (let i = 0; i < divList.length; i++) {
				divList[i].style = list[i];
			}
		}
		setStyle();

		var bannerBox = document.getElementById("banner-box");
		var stop = false;
		// 定时器
		var timer = setInterval(function () {
			if (stop) {
				return;
			}
			setListShift();
			setStyle();
		}, 2000)
		// 鼠标悬停
		bannerBox.onmouseenter = function () {
			stop = true;
		}
		bannerBox.onmouseleave = function () {
			stop = false;
		}
		// 添加单个div点击事件
		for (let i = 0; i < divList.length; i++) {
			divList[i].onclick = function (event) {
				console.log(event)
				let e = event.target;
				let left = parseFloat(e.style.left);
				let len = 0;
				switch (left) {
					case 0: len = 3; break;
					case 50: len = 4; break;
					case 150: len = 1; break;
					case 200: len = 2; break;
				}
				for (let x = 0; x < len; x++) {
					setListPop();
				}
				setStyle();
			}
		}

		// 两侧点击
		document.querySelector("#banner-box .left").onclick = function () {
			setListPop();
			setStyle();
		};
		document.querySelector("#banner-box .right").onclick = function () {
			setListShift();
			setStyle();
		};
	</script>
</body>

</html>

checkMa

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
使用js写个3d banner

要点3d轮播简单写法也比较简单，控制3d效果有三个重要的属性，分别是scaleY (控制3d y轴缩放)，z-index (控制层级)，left(定位)；还有个transition(主要是设置动画时间等效果)；后面请看效果图及代码效果图代码<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style> .b
复制链接

扫一扫