原生js实现旋转轮播

<div class="wrap" id="wrap">  
		    <div class="slide" id="slide">  
		        <ul>  
		            <li><a href="#"><img src="http://r3.ykimg.com/05100000544490016737B35A220433C1" alt=""/></a></li>  
		            <li><a href="#"><img src="http://r3.ykimg.com/05100000544490016737B35A220433C1" alt=""/></a></li>  
		            <li><a href="#"><img src="http://r3.ykimg.com/05100000544490016737B35A220433C1" alt=""/></a></li>  
		        </ul>  
		        <div class="arrow" id="arrow">  
		            <a href="javascript:;" class="prev"></a>  
		            <a href="javascript:;" class="next"></a>  
		        </div>  
		    </div>  
		</div>

以上是html部分

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 timer = null;  
    var json = [  //  包含了5张图片里面所有的样式  
        // {   //  1  
        //     width: 400,  
        //     top: 20,  
        //     left: 50,  
        //     opacity: 20,  
        //     z: 2  
        // },  
        {  // 2  
            width: 150, 
            height:100, 
            top: -10,  
            left: 0,  
            opacity: 80,  
            z: 3  
        },  
        {   // 3  
            width: 200,
            height:125,  
            top: -20,  
            left: 100,  
            opacity: 100,  
            z: 4  
        },  
        {  // 4  
            width: 150,
            height:100,  
            top: -10,  
            left: 250,  
            opacity: 80,  
            z: 3  
        },  
        // {   //5  
        //     width: 400,  
        //     top: 20,  
        //     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;  
                }  
            }  
        }  
    }  
  
    //移入的时候轮播停止  
    slide.onmouseover = function () {  
        clearInterval(timer);  
        // direction.style.display = "block";  
    };  
    //移出的时候轮播继续  
    slide.onmouseout = function () {  
        autoPlay();  
        // direction.style.display = "none";  
    };  
  
    autoPlay();  
  
    //自动轮播  
    function autoPlay() {  
        timer = setInterval(function () {  
            move(1)  
        }, 4000)  
    }  
  
    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, 
                height: json[i].height, 
                top: json[i].top,  
                left: json[i].left,  
                opacity: json[i].opacity,  
                zIndex: json[i].z  
            }, function () {  
                flag = true;  
            })  
        }  
    }
}

下面是js：