旋转轮播图

 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

   function animate (ele,json,fn){
      clearInterval(ele.timer);
      ele.timer = setInterval(function () {
       //开闭原则
       var bool = true;
       //遍历属性和值，分别单独处理json
       //attr == k(键)    target == json\[k\](值)
       for(var k in json){//遍历Jason里面的属性k
        //四部
        //获取他的属性时就需要单独处理
        var leader;
        //如果获取里面的属性是opacity时
        if(k==="opacity"){
            leader=getStyle(ele,k)*100||1;//获取到的是小数0.3
         }else {
             leader= parseInt(getStyle(ele,k)) || 0;//否则老样子
                } leader + step;
         //3.赋值
         //赋值时也要单独处理
         if(k==="opacity"){
              ele.style\[k\]=leader/100;//这种火狐chromeIE9以上都 可以
              //兼容IE678
              ele.style.filter="alpha(opacity="+leader+")";//这时leader是乘100的在这里透明度是以百分比
         //如果是层级，一次性赋值成功，不需要缓动赋值
              }else if (k==="zIndex"){
                   ele
         //1.获取步长
         var step = (json\[k\] - leader)/10;
         //2.二次加工步长
         step = step>0?Math.ceil(step):Math.floor(step);
         leader =.style.zIndex=json\[k\];
                    }
                   else {
                        ele.style\[k\] = leader + "px";
                    }
            //4.清除定时器
            //判断: 目标值和当前值的差大于步长，就不能跳出循环
            //不考虑小数的情况：目标位置和当前位置不相等，就不能清除清除定时器。
                 if(json\[k\] !== leader){
                     bool = false;
                  }
              }
            //只有所有的属性都到了指定位置，bool值才不会变成false；
            if(bool){
                clearInterval(ele.timer);
                //所有程序执行完毕了，现在可以执行回调函数了
                //只有传递了回调函数，才能执行
                    if(fn){
                        fn();
                    }
                }
            },25);
	}

1
2
3
4
5
6

        function getStyle(ele,attr){
            if(window.getComputedStyle){
                return window.getComputedStyle(ele,null)\[attr\];
            }
            return ele.currentStyle\[attr\];
        }