透明轮播原生JavaScript实现

html代码

<div id="box">
    <ul id="ul">
        <li><a href="javascript:void(0)"><img src="images/slidepic1.jpg" alt=""/></a></li>
        <li><a href="javascript:void(0)"><img src="images/slidepic2.jpg" alt=""/></a></li>
        <li><a href="javascript:void(0)"><img src="images/slidepic3.jpg" alt=""/></a></li>
        <li><a href="javascript:void(0)"><img src="images/slidepic4.jpg" alt=""/></a></li>
        <li><a href="javascript:void(0)"><img src="images/slidepic5.jpg" alt=""/></a></li>
    </ul>
    <ol id="ol">
        <li><a href="javascript:void(0)"><img src="images/slidepic1.jpg" alt=""/></a></li>
        <li><a href="javascript:void(0)"><img src="images/slidepic2.jpg" alt=""/></a></li>
        <li><a href="javascript:void(0)"><img src="images/slidepic3.jpg" alt=""/></a></li>
        <li><a href="javascript:void(0)"><img src="images/slidepic4.jpg" alt=""/></a></li>
        <li><a href="javascript:void(0)"><img src="images/slidepic5.jpg" alt=""/></a></li>
    </ol>
</div>

css代码

 * {
            margin: 0;
            padding: 0;
        }

        #box {
            height: 500px;
            width: 800px;
            border: 1px solid #c0c0c0;
            position: absolute;
            margin: 100px auto;
            left: 100px;
        }

        ul {
            list-style: none;
            height: 100%;
            width: 100%;
        }

        ul > li {
            height: 100%;
            width: 100%;
            position: absolute;
            font-size: 30px;
            text-align: center;
        }

        ol {
            list-style: none;
            width: 100%;
            margin-top: 5px;
        }

        ol > li {
            height: 100px;
            width: 146px;
            margin-left: 8px;
            float: left;
            text-align: center;
            border: 1px solid #999999;
        }

        ol > li img {
            height: 100px;
            width: 146px;
            float: left;
        }

JS代码 

动画封装

 function getStyle(ele, attr){
        if(ele.currentStyle){
            return ele.currentStyle[attr];
        }
        //一会回头再看看 null应该如何使用?
        return window.getComputedStyle(ele, null)[attr]
    }

    function animate(obj, json, callback) {
        //1.情况定时器
        clearInterval(obj.timer);
        //2.创建定时器
        obj.timer = setInterval(function () {
            // 新的位置=当前的位置+步长
            var flag = true;// 默认认为所有的 值 都完成了动画
            for (var key in json) {
                var target = 0;//目标位置
                var current = 0;//当前位置
                if (key.toLowerCase() == "opacity") {
                    target = Math.round(json[key] * 100);
                    current = Math.round(getStyle(obj, key) * 100)
                } else if (key != "zIndex") {
                    // height,width,left top
                    target = parseInt(json[key]);
                    current = parseInt(getStyle(obj, key));
                }
                //步长

                if (key != "zIndex") {
                    //说明 不参与  zIndex 变化
                    var step = (target - current) / 10;
                    step = step > 0 ? Math.ceil(step) : Math.floor(step);
                }

                // 新的位置=当前的位置+步长
                if (key.toLowerCase() == "opacity") {
                    obj.style.opacity = (current + step) / 100;
                } else if (key != "zIndex") {
                    obj.style[key] = current + step + "px";// height,width,left top
                }

                if (key == "zIndex") {
                    // 如果key== zIndex 直接给 对象赋值
                    obj.style.zIndex = Number(json[key]);
                }

                //关注哪些属性的动画还没完成
                if (current != target) {
                    flag = false;
                }
            }

            //如果for里面都没有任何属性需要改变 flag的状态,说明动画都完成了
            if (flag) {
                clearInterval(obj.timer);
                //动画完成后,通知或者做其他操作
                //此处说明 callback就是一个函数
                if (typeof(callback) == "function") {
                    callback(obj);//执行callback函数
                }
            }
        }, 30)
    }

 var ul = document.getElementById('ul');
    var ol = document.getElementById('ol');
    var lis = ul.children;
    var olls = ol.children;
    var timer = setInterval(autoPlay, 1500);
    var index = 0;

    function autoPlay() {
        index++; //
        if (index >= 5) {
            index = 0
        }

        for (var i = 0; i < lis.length; i++) {
            if (i == index) {
                animate(lis[index], {"opacity": 1});
                animate(olls[index], {"opacity": 1})
            } else {
                animate(lis[i], {"opacity": 0});
                animate(olls[i], {"opacity": 0.1})
            }
        }

        for (var i = 0; i < olls.length; i++) {
            olls[i].index = i;
            olls[i].onmouseenter = function () {
                index = this.index;
                index--;
                clearInterval(timer);
                autoPlay();
            };
            olls[i].onmouseleave = function () {
                index = this.index;
                index;
                timer = setInterval(autoPlay, 1500);
            }
        }

        ul.onmouseenter = function () {
            clearInterval(timer);
        };

        ul.onmouseleave = function () {
            timer = setInterval(autoPlay, 1500);
        }
    }