jQuery实现切割轮播图

最新推荐文章于 2022-11-14 16:45:24 发布

冷色调的夏天

最新推荐文章于 2022-11-14 16:45:24 发布

阅读量1.9w

点赞数 1

分类专栏：编程&软件&人工智能文章标签：切割轮播图 jquery js html css

本文链接：https://blog.csdn.net/qq_40695642/article/details/100004691

版权

编程&软件&人工智能专栏收录该内容

16 篇文章 3 订阅

订阅专栏

jQuery实现切割轮播图

想实现一个切割轮播图，奈何javascript有点麻烦，想到jQuery，果然，jQuery很容易的就实现了

// html部分  由于要做切割 自然想到可以使用列表分成几个区块，然后控制每个区块的速度即可
	<div class="view">
		<ul>
			<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>
			<li>
				<span></span>
				<span></span>
				<span></span>
				<span></span>
			</li>
		</ul>
		<a href="javascript:;" class="pre">&lt;</a>
		<a href="javascript:;" class="next">&gt;</a>
	</div>

// css部分
	<style>
		* {
			margin: 0;
			padding: 0;
		}

		.view {
			width: 960px;
			height: 600px;
			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%;
				/*background-color:#999;*/
				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;
				}

					ul > li > span:nth-of-type(1) {
						//选取图片
						background: url(%E6%9C%AA%E6%A0%87%E9%A2%98-1.jpg);
						transform: translateZ(300px);
					}

					ul > li > span:nth-of-type(2) {
						background: url(%E6%9C%AA%E6%A0%87%E9%A2%98-2.jpg);
						transform: translateY(-300px) rotateX(90deg);
					}

					ul > li > span:nth-of-type(3) {
						background: url(%E6%9C%AA%E6%A0%87%E9%A2%98-3.jpg);
						transform: translateZ(-300px) rotateX(180deg);
					}

					ul > li > span:nth-of-type(4) {
						background: url(%E6%9C%AA%E6%A0%87%E9%A2%98-4.jpg);
						transform: translateY(300px) rotateX(-90deg);
					}
				//:nth-of-type(n)选择器匹配同类型中的第n个同级兄弟元素
				ul > li:nth-of-type(2) > 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;
			text-align: center;
			line-height: 60px;
			position: absolute;
			top: 50%;
			text-decoration: none;
			font-size: 40px;
			transform: translate(0,-50%);
			background-color: rgba(0,0,0,0.5);
			color: #fff;
		}

		.pre {
			left: 0;
		}

		.next {
			right: 0;
		}
	</style>

// JQuery部分
	<script>
		$(function () {
			var index = 0;
			var flag = true;
			$(".next").on("click", function () {
				if (flag == true) {
					flag = false;
					index--;
					$("li").each(function (key, value) {
						$(this).css({
							"transform": "rotateX(" + (index * 90) + "deg)",
							"transition-delay": (key * 0.2) + "s"
						});
					});
					//设置点击一次轮播图完成的时间
					setTimeout(function () {
						flag = true;
					}, 1000);
				}
			});
			$(".pre").on("click", function () {
				if (flag == true) {
					flag = false;
					index--;
					$("li").each(function (key, value) {
						$(this).css({
							"transform": "rotateX(" + (index * 90) + "deg)",
							"transition-delay": (key * 0.2) + "s"
						});
					});
					setTimeout(function () {
						flag = true;
					}, 1000);
				}
			});
		});
	</script>

就这样轮播图就完成了，是不是很简单
在这里插入图片描述

由于整个切割轮播图是使用ul做的，那么我们改变这个ul的某些属性就可以得到更加好玩的东西了，使用 transform:rotate3d(1,1,0,-30deg);控制X,Y,Z轴的方向，稍加改动js即可发现更好玩的，在这里我就不演示了

// 完整代码
<!doctype html>
<html>
<head>
	<meta charset="utf-8">
	<title>使用jQuery实现切割轮播图</title>
	<style>
		* {
			margin: 0;
			padding: 0;
		}

		.view {
			width: 960px;
			height: 600px;
			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%;
				/*background-color:#999;*/
				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;
				}

					ul > li > span:nth-of-type(1) {
					//这里的图片记得改
						background: url(%E6%9C%AA%E6%A0%87%E9%A2%98-1.jpg);
						transform: translateZ(300px);
					}

					ul > li > span:nth-of-type(2) {
						background: url(%E6%9C%AA%E6%A0%87%E9%A2%98-2.jpg);
						transform: translateY(-300px) rotateX(90deg);
					}

					ul > li > span:nth-of-type(3) {
						background: url(%E6%9C%AA%E6%A0%87%E9%A2%98-3.jpg);
						transform: translateZ(-300px) rotateX(180deg);
					}

					ul > li > span:nth-of-type(4) {
						background: url(%E6%9C%AA%E6%A0%87%E9%A2%98-4.jpg);
						transform: translateY(300px) rotateX(-90deg);
					}

				ul > li:nth-of-type(2) > 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;
			text-align: center;
			line-height: 60px;
			position: absolute;
			top: 50%;
			text-decoration: none;
			font-size: 40px;
			transform: translate(0,-50%);
			background-color: rgba(0,0,0,0.5);
			color: #fff;
		}

		.pre {
			left: 0;
		}

		.next {
			right: 0;
		}
	</style>
</head>

<body>
	<div class="view">
		<ul>
			<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>
			<li>
				<span></span>
				<span></span>
				<span></span>
				<span></span>
			</li>
		</ul>
		<a href="javascript:;" class="pre">&lt;</a>
		<a href="javascript:;" class="next">&gt;</a>
	</div>
	<script src="jquery-1.12.3.min.js"></script>
	<script>
		$(function () {
			var index = 0;
			var flag = true;
			$(".next").on("click", function () {
				if (flag == true) {
					flag = false;
					index--;
					$("li").each(function (key, value) {
						$(this).css({
							"transform": "rotateX(" + (index * 90) + "deg)",
							"transition-delay": (key * 0.2) + "s"
						});
					});
					setTimeout(function () {
						flag = true;
					}, 1000);
				}
			});
			$(".pre").on("click", function () {
				if (flag == true) {
					flag = false;
					index--;
					$("li").each(function (key, value) {
						$(this).css({
							"transform": "rotateX(" + (index * 90) + "deg)",
							"transition-delay": (key * 0.2) + "s"
						});
					});
					setTimeout(function () {
						flag = true;
					}, 1000);
				}
			});
		});
	</script>
</body>
</html>

冷色调的夏天

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
jQuery实现切割轮播图

jQuery实现切割轮播图想实现一个切割轮播图，奈何javascript有点麻烦，想到jQuery，果然，jQuery很容易的就实现了// html部分由于要做切割自然想到可以使用列表分成几个区块，然后控制每个区块的速度即可 <div class="view"> <ul> <li> <span></span>...
复制链接

扫一扫