jQuery实现切割轮播图

系统管理员 2024-04-17 05:22 53阅读 0赞

# jQuery实现切割轮播图 #

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

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

就这样轮播图就完成了，是不是很简单  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNjk1NjQy_size_16_color_FFFFFF_t_70]  
![在这里插入图片描述][20190822225453719.gif]  
由于整个切割轮播图是使用ul做的，那么我们改变这个ul的某些属性就可以得到更加好玩的东西了，使用 transform:rotate3d(1,1,0,-30deg);控制X,Y,Z轴的方向，稍加改动js即可发现更好玩的，在这里我就不演示了  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNjk1NjQy_size_16_color_FFFFFF_t_70 1]

// 完整代码
 <!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>
 				
 				
 				
 				
 			</li>
 			<li>
 				
 				
 				
 				
 			</li>
 			<li>
 				
 				
 				
 				
 			</li>
 			<li>
 				
 				
 				
 				
 			</li>
 			<li>
 				
 				
 				
 				
 			</li>
 		</ul>
 		<a href="javascript:;" class="pre"><</a>
 		<a href="javascript:;" class="next">></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>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNjk1NjQy_size_16_color_FFFFFF_t_70]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/11/040cd60b2c3344dca009f4a6a33c88d6.png
[20190822225453719.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/11/0d0bd17653574649af740db77e5fd354.gif
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNjk1NjQy_size_16_color_FFFFFF_t_70 1]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/11/13c260a9fc12450faff032d992794430.png