切割轮播图案例，学习页面布局，结合jquery使用

最新推荐文章于 2022-05-16 14:55:56 发布

xqiitan

最新推荐文章于 2022-05-16 14:55:56 发布

阅读量332

点赞数

分类专栏： h5 CSS

本文链接：https://blog.csdn.net/xqiitan/article/details/88549950

版权

h5 同时被 2 个专栏收录

48 篇文章 0 订阅

订阅专栏

CSS

27 篇文章 0 订阅

订阅专栏

====================

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>切割轮播图</title>
		<style>
			* {
				margin: 0;
				padding: 0;
			}
			.view {
				width: 560px;
				height: 300px;
				margin: 100px auto;
				position: relative;
			}

			ul {
				width: 100%;
				height: 100%;
				list-style: none;
				/* transform: rotate3d(1,1,0, -30deg); */
				transform-style: preserve-3d;
			}
			ul>li {
				width: 20%;
				height: 100%;
				float: left;
				position: relative;
				transform-style: preserve-3d;
				/* 添加过渡效果 */
				transition: transform 0.5s;
			}
			ul>li>span {
				width: 100%;
				height: 100%;
				position: absolute;
				left: 0;
				top: 0;
			}

			/* 每个li的第n个span */
			ul>li>span:nth-of-type(1) {
				background: url(../images/q1.png);
				/* 往Z轴正方向，偏移一定的值（高度的一半150px） */
				transform: translateZ(150px);
			}
			ul>li>span:nth-of-type(2) {
				background: url(../images/q2.png);
				transform: translateY(-150px) rotateX(90deg);
			}
			ul>li>span:nth-of-type(3) {
				background: url(../images/q3.png);
				transform: translateZ(-150px) rotateX(180deg);
			}
			ul>li>span:nth-of-type(4) {
				background: url(../images/q4.png);
				transform: translateY(150px) rotateX(-90deg);
			}

			/* 设置每一个li元素的span所显示的图片的位置,偏移li自身宽度的位置 */
			ul>li:nth-of-type(2)>span {
				/* 第二个li元素中的所有span，都做一定的偏移。*/
				background-position: -100%, 0;
			}
			ul>li:nth-of-type(3)>span {
				background-position: -200%, 0;
			}
			ul>li:nth-of-type(4)>span {
				background-position: -300%, 0;
			}
			ul>li:nth-of-type(5)>span {
				background-position: -400%, 0;
			}

			/* 共同样式设置 */
			.pre,
			.next {
				width: 60px;
				height: 60px;
				line-height: 60px;
				text-align: center;
				position: absolute;
				top: 40%;
				text-decoration: none;
				font-size: 40px;
				transform: translate(0, 0, -50%);
				color: #FFFFFF;
				background-color: rgba(0, 0, 0, 0.5);
			}
			.pre {
				left: 0;
			}
			.next {
				right: 0;
			}
		</style>
	</head>
	<body>
		<div class="view">
			<ul>
				<!-- 每个li就是一个结构块 -->
				<li>
					<!-- 每个span，是这个结构块中的某一个面，用来显示图片 -->
					<span></span>
					<span></span>
					<span></span>
					<span></span>
				</li>
				<li>
					<span></span>
					<span></span>
					<span></span>
					<span></span>
				</li>
				<li>
					<span></span>
					<span></span>
					<span></span>
					<span></span>
				</li>
				<li>
					<span></span>
					<span></span>
					<span></span>
					<span></span>
				</li>
				<li>
					<span></span>
					<span></span>
					<span></span>
					<span></span>
				</li>
			</ul>
			<!-- 左右箭头 -->
			<a href="" class="pre">&lt;</a>
			<a href="" class="next">&gt;</a>
		</div>

		<script src="../js/jquery.min.js"></script>
		<script>
			$(function() {
				var index = 0; // 图片索引
				/* 添加节流阀 true说明本次单击会有响应 */
				var flag = true;
				/* 下一张 */
				$(".next").on("click", function() {
					if (flag == true) { // 节流阀控制
						flag = false;
						index--;
						/* 所有li元素围绕x轴旋转 */
						$("li").each(function(key, value) {
							/* 添加transform样式，进行旋转，$(this)当前li元素 */
							$(this).css({
								"transform": "rotateX(" + (index * 90) + "deg)",
								"transition-delay": (key * 0.2) + "s"
							});
						});
						/* 节流阀，flag控制 */
						setTimeout(function(){
							flag = true;
						}, 1000);
					}
				});
				/* 上一张 */
				$(".pre").on("click", function() {
					if (flag == true) { // 节流阀控制
						flag = false;
						index++;
						/* 所有li元素围绕x轴旋转 */
						$("li").each(function(key, value) {
							/* 添加transform样式，进行旋转，$(this)当前li元素 */
							$(this).css({
								"transform": "rotateX(" + (index * 90) + "deg)",
								"transition-delay": (key * 0.2) + "s",
							});
						});
						/* 节流阀，flag控制 */
						setTimeout(function(){
							flag = true;
						}, 1000);
					}
				});
			});
		</script>
	</body>
</html>

xqiitan

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
切割轮播图案例，学习页面布局，结合jquery使用

====================&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;切割轮播图&lt;/title&gt; &lt;style&gt; * { margin: 0; padding: 0
复制链接

扫一扫