JS_旋转木马

旋转木马.gif

核心代码：

<script>

    //1.获取对象
    var wrap = document.getElementById("wrap");
    var arrow = document.getElementById("arrow");

    var slide = document.getElementById("slide");
    var lis = slide.children[0].children;

    var rightBtn = document.getElementById("arrRight");
    var leftBtn = document.getElementById("arrLeft");

    //2. 触摸改变左右箭头的透明度
    wrap.onmouseover = function () {

        animate(arrow, {"opacity": 1});
    }
    wrap.onmouseout = function () {

        animate(arrow, {"opacity": 0});
    }

    //3. 数据源
    var datas = [
        {
            "width": 400,
            "top": 20,
            "left": 50,
            "opacity": 0.2,
            "zIndex": 2
        },//0
        {
            "width": 600,
            "top": 70,
            "left": 0,
            "opacity": 0.8,
            "zIndex": 3
        },//1
        {
            "width": 800,
            "top": 100,
            "left": 200,
            "opacity": 1,
            "zIndex": 4
        },//2
        {
            width: 600,
            top: 70,
            left: 600,
            opacity: 0.8,
            zIndex: 3
        },//3
        {
            "width": 400,
            "top": 20,
            "left": 750,
            "opacity": 0.2,
            "zIndex": 2
        }//4
    ];

    //4. 开始调用 布局
    changeFor();

    //5.点击改变旋转方向
    //5.1 节流阀 控制动画的频率
    var flag = true;

    //5.2 点击右按钮
    rightBtn.onclick = function () {

        if (flag) {
            datas.unshift(datas.pop());
            flag = false;
            changeFor();
        }
    }

    //5.3  点击左按钮
    leftBtn.onclick = function () {

        if (flag) {
            datas.push(datas.shift());

            flag = false;
            changeFor();
        }
    }

    // 封装的布局函数+回调
    function changeFor() {

        for (var i = 0; i < lis.length; i++) {

            // obj params
            animate(lis[i], datas[i], function () {
                flag = true;
            });
        }
    }


</script>

源码：吻我