网页特效（旋转木马轮播图）

 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/0my.js"></script>
 9 </head>
10 <body>
11 <div class="wrap" id="wrap">
12     <div class="slide" id="slide">
13         <ul>
14             <li><a href="#"><img src="images/slidepic1.jpg" alt=""/></a></li>
15             <li><a href="#"><img src="images/slidepic2.jpg" alt=""/></a></li>
16             <li><a href="#"><img src="images/slidepic3.jpg" alt=""/></a></li>
17             <li><a href="#"><img src="images/slidepic4.jpg" alt=""/></a></li>
18             <li><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 </body>
27 </html>

animate.js

 1 /**
 2  * Created by jf on 2016/4/3.
 3  */
 4 //需求 将 任意对象 的 任意属性 渐渐地变为 目标值
 5 function animate(obj, json, fn) {
 6     clearInterval(obj.timer);
 7     obj.timer = setInterval(function () {
 8         var flag = true;
 9         for (var k in json) {
10             if (k == "opacity") {
11                 var leader = getStyle(obj, k) * 100;
12                 var target = json[k] * 100;
13                 var step = (target - leader) / 10;
14                 step = step > 0 ? Math.ceil(step) : Math.floor(step);
15                 leader = leader + step;
16                 obj.style[k] = leader / 100;
17             } else if (k == "zIndex") {
18                 obj.style[k] = json[k];
19             } else {
20                 var leader = parseInt(getStyle(obj, k)) || 0;
21                 var target = json[k];
22                 var step = (target - leader) / 10;
23                 step = step > 0 ? Math.ceil(step) : Math.floor(step);
24                 leader = leader + step;
25                 obj.style[k] = leader + "px";
26             }
27             console.log("target: " + target + "leader: " + leader + "step: " + step);
28             if (leader != target) {
29                 flag = false;//告诉人家 我还有没到的呢
30             }
31         }
32         //最后再判断 如果标记仍然是true说明 没有没到达的了
33         //也就是都到达了
34         if (flag) {
35             clearInterval(obj.timer);
36             if (fn) {
37                 fn();
38             }
39         }
40     }, 15)
41 }
42  //兼容性的方法
43 function getStyle(obj, attr) {
44     if (obj.currentStyle) {
45         return obj.currentStyle[attr];
46     } else {
47         return window.getComputedStyle(obj, null)[attr];
48     }
49 }

0my.js

 1 /**
 2  * Created by jf on 2016/4/3.
 3  */
 4 window.onload = function () {
 5     var wrap = document.getElementById("wrap");
 6     var slide = document.getElementById("slide");
 7     var ul = slide.children[0];
 8     var lis = ul.children;
 9     var arrow = document.getElementById("arrow");
10     var arrRight = document.getElementById("arrRight");
11     var arrLeft = document.getElementById("arrLeft");
12     var config = [
13         {
14              400,
15             top: 20,
16             left: 50,
17             opacity: 0.2,
18             zIndex: 2
19         },//0
20         {
21              600,
22             top: 70,
23             left: 0,
24             opacity: 0.8,
25             zIndex: 3
26         },//1
27         {
28              800,
29             top: 100,
30             left: 200,
31             opacity: 1,
32             zIndex: 4
33         },//2
34         {
35              600,
36             top: 70,
37             left: 600,
38             opacity: 0.8,
39             zIndex: 3
40         },//3
41         {
42              400,
43             top: 20,
44             left: 750,
45             opacity: 0.2,
46             zIndex: 2
47         }//4
48     ];
49     wrap.onmouseover = function () {
50         animate(arrow, {"opacity": 1});
51     }
52     wrap.onmouseout = function () {
53         animate(arrow, {"opacity": 0});
54     }
55     function assign() {
56         for (var i = 0; i < lis.length; i++) {
57             animate(lis[i], config[i], function () {
58                 flag = true;
59             });
60         }
61     }
62 
63     var flag = true;
64 
65     assign();
66     arrRight.onclick = function () {
67         //if (flag) {
68             flag = false;
69             config.push(config.shift());
70             assign();
71         //}
72     }
73     arrLeft.onclick = function () {
74         //if (flag) {
75             flag = false;
76             config.unshift(config.pop());
77             assign();
78         //}
79     }
80 }

css.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 }