初学制作3D旋转木马
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了初学制作3D旋转木马相关的知识，希望对你有一定的参考价值。
---恢复内容开始---
1.1. 旋转木马轮播图思路
@数组操作方法复习
arr.push("要添加的元素") 在数组的最后添加值 并返回新数组的长度
arr.pop() 删除最后一个值 并将其返回
arr.unshift("要添加的元素") 在数组的开头添加值 并返回新数组的长度
arr.shift() 删除第一个值 并将其返回
@旋转木马
获取元素
鼠标经过wrap显示arrow
给每个li赋json值
点击左右箭头 调整数组
//点左键 配置单 删掉最后一个 加在开始
//点右键 配置单 删掉第一个 加在最后
将赋json值的方法抽取
点击箭头的时候执行
页面加载完先执行一次
设置节流阀
第一步设置css样式：代码如下
1 @charset "UTF-8";
2 /*初始化 reset*/
3 blockquote,body,button,dd,dl,dt,fieldset,form,h1,h2,h3,h4,h5,h6,hr,input,legend,li,ol,p,pre,td,textarea,th,ul{margin:0;padding:0}
4 body,button,input,select,textarea{font:12px/1.5 "Microsoft YaHei", "微软雅黑", SimSun, "宋体", sans-serif;color: #666;}
5 ol,ul{list-style:none}
6 a{text-decoration:none}
7 fieldset,img{border:0;vertical-align:top;}
8 a,input,button,select,textarea{outline:none;}
9 a,button{cursor:pointer;}
10
11 .wrap{
12 width:1200px;
13 margin:100px auto;
14 }
15 .slide {
16 height:500px;
17 position: relative;
18 }
19 .slide li{
20 position: absolute;
21 left:200px;
22 top:0;
23 }
24 .slide li img{
25 width:100%;
26 }
27 .arrow{
28 opacity: 0;
29 }
30 .prev,.next{
31 width:76px;
32 height:112px;
33 position: absolute;
34 top:50%;
35 margin-top:-56px;
36 background: url(../images/prev.png) no-repeat;
37 z-index: 99;
38 }
39 .next{
40 right:0;
41 background-image: url(../images/next.png);
42 }
第二步：调用js缓动运动函数代码
function animate(obj, json, fn) {
clearInterval(obj.timer);
obj.timer = setInterval(function () {
var flag = true;
for (var k in json) {
//json 属性名:属性值 k:json[k]
if (k == "opacity") {
var leader = parseInt(getStyle(obj, k) * 100);
var target = json[k] * 100;
var step = (target - leader) / 10;
step = step > 0 ? Math.ceil(step) : Math.floor(step);
leader = leader + step;
obj.style[k] = leader / 100;
} else if (k == "zIndex") {
obj.style[k] = json[k];
} else {
var leader = parseInt(getStyle(obj, k)) || 0;
var target = json[k];
var step = (target - leader) / 10;
step = step > 0 ? Math.ceil(step) : Math.floor(step);
leader = leader + step;
obj.style[k] = leader + "px";
}
if (leader != target) {
flag = false;
}
}
if (flag) {
clearInterval(obj.timer);
if (fn) {
fn();
}
}
}, 10)
}
function getStyle(obj, attr) {
if (obj && obj.currentStyle) {
return obj.currentStyle[attr];//IE678
} else {
return window.getComputedStyle(obj, null)[attr];
}
}
第三步：主体架构实现
1 <!DOCTYPE html>
2 <html>
3 <head lang="en">
4 <meta charset="UTF-8">
5 <title>旋转木马轮播图</title>
6 <link rel="stylesheet" href="css/css.css"/>
7 <script type="text/javascript" src="js/animate.js"></script>
8 <!--<script type="text/javascript" src="js/my.js"></script>-->
9 </head>
10 <body>
11 <div class="wrap" id="wrap">
12 <div class="slide" id="slide">
13 <ul>
14 <li class="one"><a href="#"><img src="images/bingbing.jpg" alt=""/></a></li>
15 <li class="two"><a href="#"><img src="images/lingengxin.jpg" alt=""/></a></li>
16 <li class="three"><a href="#"><img src="images/yuanyuan.png" alt=""/></a></li>
17 <li class="four"><a href="#"><img src="images/slidepic4.jpg" alt=""/></a></li>
18 <li class="five"><a href="#"><img src="images/slidepic5.jpg" alt=""/></a></li>
19 </ul>
20 <div class="arrow" id="arrow">
21 <a href="javascript:;" class="prev" id="arrLeft"></a>
22 <a href="javascript:;" class="next" id="arrRight"></a>
23 </div>
24 </div>
25 </div>
26 <script>
27 window.onload = function () { // 当整个页面元素都渲染或是加载 完毕 的时候触发
28 //1. 获得要操作的对象
29 var wrap = document.getElementById("wrap");
30 var slideBox = document.getElementById("slide");
31 var ul = slideBox.children[0];
32 var lis = ul.children;
33 var arrow = document.getElementById("arrow");
34 var left = document.getElementById("arrLeft");
35 var right = document.getElementById("arrRight");
36
37 var config = [
38 {
39 "width": 400,
40 "top": 20,
41 "left": 50,
42 "opacity": 0.2,
43 "zIndex": 2
44 },//0
45 {
46 "width": 600,
47 "top": 70,
48 "left": 0,
49 "opacity": 0.8,
50 "zIndex": 3
51 },//1
52 {
53 "width": 800,
54 "top": 120,
55 "left": 200,
56 "opacity": 1,
57 "zIndex": 4
58 },//2
59 {
60 "width": 600,
61 "top": 70,
62 "left": 600,
63 "opacity": 0.8,
64 "zIndex": 3
65 },//3
66 {
67 "width": 400,
68 "top": 20,
69 "left": 750,
70 "opacity": 0.2,
71 "zIndex": 2
72 }//4
73 ]; //其实就是一个配置单 规定了每张图片的大小位置层级透明度
74
75 //2. 当鼠标移入的时候，显示左右按钮
76 wrap.onmouseover = function(){
77 animate(arrow,{"opacity":1});
78 };
79 wrap.onmouseout = function(){
80 animate(arrow,{"opacity":0});
81 };
82
83 //其实就是一个配置单 规定了每张图片的大小位置层级透明度
84 assige(); //先调用一下，让原来的每个li走到指定的位置
85
86 function assige(){
87 for(var i=0;i<lis.length;i++){
88 animate(lis[i],config[i],function(){
89 flag = true; //在这里变成true，也就是说前面的li都扫完完毕 了，都走到了配置文件中的指定位置
90 });
91 }
92 }
93
94 var flag = true; //就表示当前的所有的li都走到了指定的位置
95 // 3. 点击右侧按钮的时候
96 right.onclick = function(){
97 if(flag){
98 flag = false;
99 config.push(config.shift()); //将数组中的第一项删除，添加到数组的最后
100 assige(); // 根据新生成的数组配置文件重新渲染每个li
101 }
102 }
103
104 left.onclick = function(){
105 if(flag){
106 flag = false;
107 config.unshift(config.pop()); // 删除数组中的最后一项，添加到数组的最前面
108 assige(); //根据新生成的配置文件数组，重新让li走到指定的位置
109 }
110 };
111
112 // 4. 添加节流阀(flag标识，让每个li渲染完毕之后才进行下一次操作，一直保持淡入淡出较慢的速度显示)
113 }
114 </script>
115 </body>
116 </html>
以上结束（所用到的图片如下，第一次写）
实现效果如下：
---恢复内容结束---
以上是关于初学制作3D旋转木马的主要内容，如果未能解决你的问题，请参考以下文章