旋转木马效果实现

html代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<div class="wrap" id="wrap">
  <div class="slide" id="slide">
    <ul>
      <li><a href="#"><img src="1.jpg" alt=""/></a></li>
      <li><a href="#"><img src="2.jpg" alt=""/></a></li>
      <li><a href="#"><img src="3.jpg" alt=""/></a></li>
      <li><a href="#"><img src="4.jpg" alt=""/></a></li>
      <li><a href="#"><img src="5.jpg" alt=""/></a></li>
    </ul>
    <div class="arrow" id="arrow">
      <a href="javascript:;" class="prev" id="arrLeft"></a>
      <a href="javascript:;" class="next" id="arrRight"></a>
    </div>
  </div>
</div>

css代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
.wrap{
    width:1200px;
    margin:100px auto;
}
.slide {
    height:500px;
    position: relative;
}
.slide li{
    position: absolute;
    left:200px;
    top:0;
}
.slide li img{
    width:100%;
}
.arrow{
    opacity: 0;
}
.prev,.next{
    width:76px;
    height:112px;
    position: absolute;
    top:50%;
    margin-top:-56px;
    background: url(../images/prev.png) no-repeat;
    z-index: 99;
}
.next{
    right:0;
    background-image: url(../images/next.png) no-repeat;
}

JavaScript代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
var config = [{
     width: 400,
     top: 20,
     left: 50,
     opacity: 0.2,
     zIndex: 2
   }, {
     width: 600,
     top: 70,
     left: 0,
     opacity: 0.8,
     zIndex: 3
   },{
     width: 800,
     top: 100,
     left: 200,
     opacity: 1,
     zIndex: 4
   },{
     width: 600,
     top: 70,
     left: 600,
     opacity: 0.8,
     zIndex: 3
   },{
     width: 400,
     top: 20,
     left: 750,
     opacity: 0.2,
     zIndex: 2
   }];

 // 页面加载的事件
 window.onload = function () {
   // 假设所有的动画执行完毕
   var flag = true;
   // 获取所有的列
   var list = document.getElementById("slide").getElementsByTagName("li");
   // 图片散开
   function assign() {
     for (var i = 0; i < list.length; i++) {
       // 设置每个li,把宽,层级,透明度,left,top到达指定的目标位置
       animate(list[i], config[i],function () {
         flag = true;
       });
     }
   }
   assign();
   // 右边按钮
   document.getElementById("arrRight").onclick = function () {
     if (flag){
       // 只有当动画执行完毕才能进行下一次动画 
       flag = false;
       // 把数组第一个元素放到最后
       config.push(config.shift());
       // 重新分配
       assign();
     }
   };
   // 左边按钮
   document.getElementById("arrLeft").onclick = function () {
     if (flag){
       flag = false;
       // 把数组最后一个元素放到最前
       config.unshift(config.pop());
       assign();
     }

   };
   //鼠标进入,左右焦点的div显示
   document.getElementById("slide").onmouseover = function () {
     animate(document.getElementById("arrow"), {"opacity": 1});
   };
   //鼠标离开,左右焦点的div隐藏
   document.getElementById("slide").onmouseout = function () {
     animate(document.getElementById("arrow"), {"opacity": 0});
   };
 };
 
 // 获取元素的计算样式
 function getAttrValue(element,attr) {
     return element.currentStyle ? element.currentStyle[attr]
      : window.getComputedStyle(element,null)[attr] || 0;
 }
 
 // 元素移动函数
 function animate(element,json,fn) {
     // 先清除计时器
     clearInterval(element.timeId);
     element.timeId = setInterval(function () {
         // 假设都达到了目标
         var flag = true;
         for (var attr in json){
             // 判断属性是不是opacity
             if (attr == "opacity"){
                 var current = getAttrValue(element,attr) * 100;
                 // 每次移动的步数
                 var target = json[attr] * 100;
                 var step = (target-current) / 10;
                 step = step > 0 ? Math.ceil(step) : Math.floor(step);
                 current = current + step;
                 element.style[attr] = current / 100;
             }
             // 判断属性是不是zIndex
             else if (attr == "zIndex"){
                 element.style[attr] = json[attr];
             }
             // 其他属性的设置
             else {
                 // 获取当前的位置
                 // getAttrValue(element,attr)获取的是字符串类型
                 var current = parseInt(getAttrValue(element,attr)) || 0;
                 var target = json[attr];
                 var step = (target-current) / 10;
                 step = step > 0 ? Math.ceil(step) : Math.floor(step);
                 current = current + step;
                 element.style[attr] = current + "px";
             }
             // 如果没到目标结果就为false
             if (current != target){
                 flag = false;
             }
         }
         if (flag){
             clearInterval(element.timeId);
             // 如果用户传入了回调的函数，执行回调函数
             if (fn){
                 fn(); 
             }
         }
         console.log("target:" + target + "current:" + current + "step:" + step);
     },10);
 }