h5-切割轮播图

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>Title</title>
  6     <style>
  7         div,ul,li,span{
  8             margin: 0;
  9             padding: 0;
 10         }
 11         .view{
 12             width: 1920px;
 13             height: 1080px;
 14             margin: 100px auto;
 15             position: relative;
 16         }
 17         ul{
 18             width: 100%;
 19             height: 100%;
 20             list-style: none;
 21             /*transform: rotate3d(1,1,0,-30deg);*/
 22             transform-style: preserve-3d;
 23         }
 24         ul >li{
 25             width: 20%;
 26             height: 100%;
 27             float: left;
 28             position: relative;
 29             transform-style: preserve-3d;
 30             /*添加过度效果*/
 31             transition: transform 0.5s;
 32 
 33         }
 34         ul > li > span{
 35             width: 100%;
 36             height: 100%;
 37             position: absolute;
 38             left: 0;
 39             top: 0;
 40         }
 41         /*其实就是一个立方体的四个面，来转换*/
 42         ul > li > span:nth-of-type(1){
 43             background: url("../img/lunbo1.jpg");
 44             transform: translateZ(540px);
 45         }
 46         ul > li > span:nth-of-type(2){
 47             background: url("../img/lunbo2.jpg");
 48             transform: translateY(-540px) rotateX(90deg);
 49         }
 50         ul > li > span:nth-of-type(3){
 51             background: url("../img/lunbo3.jpg");
 52             transform: translateZ(-540px) rotateX(180deg);
 53         }
 54         ul > li > span:nth-of-type(4){
 55             background: url("../img/lunbo4.jpg");
 56             transform: translateY(540px) rotateX(-90deg);
 57         }
 58 
 59         /*设置每一个li元素的span所显示的图片的·位置.每一个往自己地左边偏移相应的位置，不然会都显示第一个li的图片*/
 60         ul> li:nth-of-type(2) > span {
 61             background-position: -100% 0;
 62         }
 63         ul> li:nth-of-type(3) > span {
 64             background-position: -200% 0;
 65         }
 66         ul> li:nth-of-type(4) > span {
 67             background-position: -300% 0;
 68         }
 69         ul> li:nth-of-type(5) > span {
 70             background-position: -400% 0;
 71         }
 72 
 73         .pre,.next{
 74             width: 200px;
 75             height: 200px;
 76             text-align: center;
 77             line-height: 200px;
 78             position: absolute;
 79             top: 50%;
 80             text-decoration: none;
 81             font-size: 170px;
 82             transform: translate(0,-50%);
 83             background-color: rgba(0,0,0,0.5);
 84             color: #fff;
 85         }
 86         .pre{
 87             left: 0;
 88         }
 89         .next{
 90             right: 0;
 91         }
 92     </style>
 93 </head>
 94 <body>
 95 <div class="view">
 96     <ul>
 97         <!--每一个li就是一个结构快-->
 98         <li>
 99             <!--每一个span就是结构快的某一面，用来显示图片-->
100             <span></span>
101             <span></span>
102             <span></span>
103             <span></span>
104         </li>
105         <li>
106             <span></span>
107             <span></span>
108             <span></span>
109             <span></span>
110         </li>
111         <li>
112             <span></span>
113             <span></span>
114             <span></span>
115             <span></span>
116         </li>
117         <li>
118             <span></span>
119             <span></span>
120             <span></span>
121             <span></span>
122         </li>
123         <li>
124             <span></span>
125             <span></span>
126             <span></span>
127             <span></span>
128             <span></span>
129         </li>
130     </ul>
131     <a href="javascript:;" class="pre">&lt;</a>
132     <a href="javascript:;" class="next">&gt;</a>
133 </div>
134 <script src="../js/jquery-3.4.1.js"></script>
135 <script>
136     $(function () {
137         /*定义一个图片的索引*/
138         var index=0;
139         /*添加节流阀  true说明本次单击会相应处理*/
140         var flag = true;
141         /*下一张*/
142         $(".next").on("click",function () {
143             if (flag==true){
144                 flag=false;
145                 index--;
146                 /*所谓下一张，就是将所有li元素围绕x旋转*/
147                 $("li").each(function (key,value) {
148                     /*通过添加transform样式进行旋转*/
149                     $(this).css({
150                         "transform":"rotateX("+(index*90)+"deg)",
151                         "transition-delay":(key*0.2)+"s"
152                     });
153                 });
154 
155                 setTimeout(function () {
156                     flag=true;
157                 },1000);
158             };
159 
160         });
161         /*上一张*/
162         $(".pre").on("click",function () {
163             if (flag==true){
164                 flag=false;
165                 index++;
166                 /*所谓下一张，就是将所有li元素围绕x旋转*/
167                 $("li").each(function (key,value) {
168                     /*通过添加transform样式进行旋转*/
169                     $(this).css({
170                         "transform":"rotateX("+(index*90)+"deg)",
171                         "transition-delay":(key*0.2)+"s"
172                     });
173                 });
174 
175                 setTimeout(function () {
176                     flag=true;
177                 },1000);
178             };
179 
180         });
181     });
182 </script>
183 </body>
184 </html>