437day（切割连播图）

《2018年12月15日》【连续437天】
标题：切割连播图；
内容：
原理：
437day（切割连播图）
实际效果：懒得做按键了，点图就能动；
437day（切割连播图）
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		* {
			margin: 0;
			padding: 0;
		}
		.view {
			width: 560px;
			height: 300px;
			margin: 100px auto;
			position: relative;
		}
		.view a{
			width: 100%;
			height: 100%;
			display: block;
			position: absolute;
			left: 0;
			top: 0;
		}
		ul {
			width: 100%;
			height: 100%;
			list-style: none;
			/*transform: rotate3d(1,1,0,-30deg);*/
			transform-style: preserve-3d;
		}
		ul li {
			width: 25%;
			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;
		}
		ul li span:nth-of-type(1) {
			background: url('images/q1.jpg');
			transform: translateZ(150px);
		}
		ul li span:nth-of-type(2) {
			background: url('images/q2.jpg');
			transform: translateY(-150px) rotateX(90deg);
		}
		ul li span:nth-of-type(3) {
			background: url('images/q3.jpg');
			transform: translateZ(-150px) rotateX(180deg);
		}
		ul li span:nth-of-type(4) {
			background: url('images/q4.jpg');
			transform: translateY(150px) rotateX(-90deg);
		}
		/*设置每一个li元素的span图片显示*/
		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;
		}
	</style>
</head>
<body>
	<div class="view">
		<a href="javascript:;" class="next">
			<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>
			</ul>
		</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){ //0 1 2 3 4
                    /*通过添加transform样式进行旋转*/
                    $(this).css({
                        "transform":"rotateX("+(index*90)+"deg)",
                        "transition-delay":(key*0.2)+"s"
                    });
                });
                setTimeout(function(){
                    flag=true;
                },1000);
            }
        });
    });

	</script>
</body>
</html>