实现的3d轮播图

Posted hello world

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了实现的3d轮播图相关的知识，希望对你有一定的参考价值。

1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>Title</title>
  6     <style>
  7         *{
  8             padding: 0;
  9             margin: 0;
 10         }
 11         .stage{
 12             display: flex;
 13 
 14             perspective: 1500px;
 15         }
 16         .void{
 17             clear: both;
 18         }
 19         .container{
 20 
 21             width: 500px;
 22             height: 400px;
 23             /*通过改变height也可以改变是俯视还是仰视效果*/
 24 
 25             margin: 0 auto;
 26             transform-style: preserve-3d;
 27         }
 28         .container img{
 29 
 30             margin: auto;
 31             width: 500px;
 32             height: 200px;
 33             position: absolute;
 34             box-shadow: grey 20px;
 35 
 36         }
 37         /*
 38 
 39         img:nth-child(1){
 40 
 41             transform: rotateY(0deg) translateZ(280px)   translateX(0px);
 42         translateY(0px);;
 43         }
 44         img:nth-child(2){
 45             transform: rotateY(60deg) translateZ(280px);
 46         }
 47         img:nth-child(3){
 48             transform: rotateY(120deg) translateZ(280px);
 49         }
 50         img:nth-child(4){
 51             transform: rotateY(180deg) translateZ(280px);
 52         }
 53         img:nth-child(5){
 54             transform: rotateY(240deg) translateZ(280px);
 55         }
 56         img:nth-child(6){
 57             transform: rotateY(300deg) translateZ(280px);
 58         }
 59         */
 60 
 61     </style>
 62 </head>
 63 <body>
 64 <div class="stage">
 65     <div class="container">
 66         <img src="相框之拼图布局/imgs/Desert.jpg" >
 67         <img src="相框之拼图布局/imgs/Lighthouse.jpg">
 68         <img src="相框之拼图布局/imgs/Jellyfish.jpg">
 69         <img src="相框之拼图布局/imgs/Koala.jpg">
 70         <img src="相框之拼图布局/imgs/Tulips.jpg">
 71         <img src="相框之拼图布局/imgs/Penguins.jpg">
 72         <div class="void"></div>
 73 
 74     </div>
 75 </div>
 76 <input type="button" id="button" value="点击一下">
 77 <script type="text/javascript" src="jquery-1.12.0.min.js"></script>
 78 <script>
 79     $(function(){
 80         var imgs=document.getElementsByTagName("img");
 81         var order=0;
 82         function move() {
 83             //对于每一个img元素都发生变化
 84             for (var i = 0; i < imgs.length; i++) {
 85                 (function(index){
 86                     imgs[index].cur = 60 * (index + order - 1);
 87                     imgs[index].target = 60 * (index + order);
 88                     imgs[index].timer = setInterval(function () {
 89                         imgs[index].speed = (imgs[index].target - imgs[index].cur) / 1000;
 90 
 91                         imgs[index].speed = imgs[index].speed > 0 ? Math.ceil(imgs[index].speed) : Math.floor(imgs[index].speed);
 92 
 93                         if (imgs[index].cur + imgs[index].speed == imgs[index].target) {
 94                             clearInterval(imgs[index].timer);
 95                         } else {
 96                             imgs[index].cur = imgs[index].cur + imgs[index].speed;
 97                             imgs[index].style.transform = "rotateY(" +(imgs[index].cur + imgs[index].speed) + "deg)  translateZ(500px)  translateY(200px)";
 98                         }
 99                     }, 10);
100                 })(i);
101             }
102             order++;
103         }
104         move();
105         setInterval(move,4000);
106     })
107 </script>
108 </body>
109 </html>

笔记：

1，解决for循环没有块级作用域的问题：

（1）使用匿名函数，传递参数

（2）使用ES6中的let,注意这儿要考虑ES6中对于浏览器的兼容性

2，如何实现3d效果

张鑫旭关于CSS 3d效果的博客

以上是关于实现的3d轮播图的主要内容，如果未能解决你的问题，请参考以下文章

3D切割轮播图

jquery 实现3d切割轮播图

3D效果切割轮播图

基于CSS3JavaScript实现轮播图翻页，自动播放

带锁的3D切割轮播图

3D轮播图