首页 > 代码库 > 实现的3d轮播图
实现的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="http://www.mamicode.com/相框之拼图布局/imgs/Desert.jpg" >
67 <img src="http://www.mamicode.com/相框之拼图布局/imgs/Lighthouse.jpg">
68 <img src="http://www.mamicode.com/相框之拼图布局/imgs/Jellyfish.jpg">
69 <img src="http://www.mamicode.com/相框之拼图布局/imgs/Koala.jpg">
70 <img src="http://www.mamicode.com/相框之拼图布局/imgs/Tulips.jpg">
71 <img src="http://www.mamicode.com/相框之拼图布局/imgs/Penguins.jpg">
72 <div class="void"></div>
73
74 </div>
75 </div>
76 <input type="button" id="button" value="http://www.mamicode.com/点击一下">
77 <script type="text/javascript" src="http://www.mamicode.com/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轮播图
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。