旋转轮播图

animate:

function animate(obj,json,fn) {
    // 第一参数 动的对象   2  attr  动的那个属性   3   属性值少多少
    clearInterval(obj.timer);
    obj.timer = setInterval(function() {
        var flag = true;  //  用来判断是否停止定时器   定时器的里面
        //  每隔 30 毫秒就要运行一次
        for(var k in json) {  // k 属性     json[k] 是属性值
            // 第一 k 是 width
            // 第二 k     height
            //  leader  =  600 -  100
            // leader = leader + (target - leader )  /10 ;
            //  计算步长
            // target 目标位置    leader 不清楚，我们不知道用户改那个属性
            // 检测用户给我们了什么属性，  我们就用这个属性的值 来计算
            // 我们怎么知道用户给我们属性，我们怎么又能得到属性的值呢？
            //  var leader = obj.style[attr];  他只能得到行内式
            var leader = 0;
            // 因为透明度是 小数   取值 0~1 之间    第二个  它没有单位
            if(k == "opacity") {
                // 先解决小数的问题
                leader =  Math.round(getStyle(obj,k) * 100) || 100;
                // 如果没有opacity  默认当 1 看    1* 100  = 100
                // 我们去过来的是  0.3  但是小数不好计算 我们乘以100   30  好计算
            }
            else {
                leader = parseInt(getStyle(obj,k)) || 0;
                // 他本身有单位 所以要去掉    默认的默认是 0
            }
            //去掉px 的方法   parseInt(25px)   25
            /* alert(leader);*/
            var step = (json[k] - leader) / 10;
            step = step > 0 ? Math.ceil(step) : Math.floor(step);
            leader = leader + step;
            if( k == "opacity") {   // 记住我们的透明是不加单位的  不要加px
                obj.style.opacity = leader / 100;
//                    opacity: 0.4;
//                    filter: alpha(opacity = 40);     /*不能改只能是 40  不能是 0.4*/
                obj.style.filter = "alpha(opacity = "+leader+")";
            }
            // 设置层级
            else if(k == "zIndex") {
                obj.style.zIndex = json[k];    //  直接给值
            }
            else {
                obj.style[k] = leader + "px";   // 其他的要单位
            }
            if(leader != json[k]) {  //  只要三个属性有一个没有到达，我就取反
                // 这句话要写到 for in 里面   因为有三个属性，所以用 for in 才能遍历
                // 三个都到了 都不执行这句话了
                flag = false;
            }
        }
        // console.log(flag);
        if(flag) {
            clearInterval(obj.timer);
            if(fn){   // 如果有函数传递过来  ， 定时器结束了，说明动画结束  可以执行 回调函数
                fn();   // 执行函数  fn + ();
            }
        }
    },30)
}
function getStyle(obj,attr) {
    if(obj.currentStyle) {
        // 如果支持，返回改属性值
        //  return  obj.style.left    只能得到行内式的
        // return  obj.currentStyle["left"];   // 正确的写法，但是left 是传进来的
        return  obj.currentStyle[attr];
    }
    else
    {
        return window.getComputedStyle(obj,null)[attr];
    }
}

旋转轮播方法：

window.onload = function() {
    var arrow = document.getElementById("arrow");  // 三角
    var wrap = document.getElementById("wrap");   // 大盒子
    var slide = document.getElementById("slide");
    var lis = slide.children[0].children;   // 获得所有的li
    var json = [  //  包含了5张图片里面所有的样式
        {   //  1
            width:400,
            top:70,
            left:50,
            opacity:20,
            z:2
        },
        {  // 2
            width:600,
            top:120,
            left:0,
            opacity:80,
            z:3
        },
        {   // 3
            width:800,
            top:100,
            left:200,
            opacity:100,
            z:4
        },
        {  // 4
            width:600,
            top:120,
            left:600,
            opacity:80,
            z:3
        },
        {   //5
            width:400,
            top:70,
            left:750,
            opacity:20,
            z:2
        }
    ];
    wrap.onmouseover = function() {   // 鼠标经过显示 三角
        animate(arrow,{opacity:100});
    }
    wrap.onmouseout = function() {  // 鼠标离开 隐藏三角
        animate(arrow,{opacity:0});
    }
    move(); // 页面执行也调用一次
    // 两个按钮
    var flag = true;   // 用于函数节流
    var as = arrow.children;   // 2 个 a
    for(var k in as) {
        as[k].onclick = function() {
            // 当俺们点击的时候， 只做一件事情  ---- 交换json
            if(this.className == "prev") {  // 左侧按钮
                //  alert(11);
                if(flag == true) {   // 实现按钮只能点击一次
                    move(true);
                    flag = false;
                }
            }
            else
            {
              /*  当我们点击了 右侧按钮  ：
    把 数组里面的第一个值删掉 ，然后把这个值追加到 数组的最后面。
     json.push(json.shift());*/
                // alert(22);   // 右侧按钮
               if(flag == true) {   // 实现按钮只能点击一次
                   move(false);
                   flag = false;
               }
            }
        }
    }
    function move(x) {
        if(x != undefined) {   // 如果没有值传递过来，就应该  不执行 里面的语句直接遍历json
            if(x) {
                // 交换 反向json   左侧
                json.unshift(json.pop())
            }else {
                // 正向 json
                json.push(json.shift());
            }
        }
        // 交换完毕 json 之后，就要 循环执行一次
        for(var i=0;i<json.length;i++) {
            animate(lis[i],{
                width: json[i].width,
                top: json[i].top,
                left: json[i].left,
                opacity: json[i].opacity,
                zIndex: json[i].z
            },function(){ flag = true; })
        }
    }

    // go
      /*  width:400,
        top:20,
        left:750,
        opacity:20,
        z:2*/
   /* // 给每个图片 5个 json
    for(var i=0;i<json.length;i++) {
        animate(lis[i],{
            width: json[i].width,
            top: json[i].top,
            left: json[i].left,
            opacity: json[i].opacity,
            zIndex: json[i].z
        })
    }*/

}