用原生JavaScript实现淡入淡出轮播图

html代码

<div id="banner">
    <ul>
        <li><img src="images/1.jpg"></li>
        <li><img src="images/2.jpg"></li>
        <li><img src="images/3.jpg"></li>
        <li><img src="images/4.jpg"></li>
    </ul>
    <div id="direction">
        <a href="##"><i class="iconfont icon-xiangzuo"></i></a>
        <a href="##"><i class="iconfont icon-xiangyou"></i></a>
    </div>
    <div id="btn">
        <a href="##" class="active"></a>
        <a href="##"></a>
        <a href="##"></a>
        <a href="##"></a>
    </div>
</div>

css代码

  * {
            margin: 0;
            padding: 0;
        }

        ul, li {
            list-style: none;
        }

        #banner {
            width: 800px;
            height: 400px;
            margin: 40px auto;
            position: relative;
        }

        #banner > ul > li {
            position: absolute;
            opacity: 0;
            filter: alpha(opacity:0);
        }

        #banner > ul > li:nth-child(1) {
            opacity: 1;
            filter: alpha(opacity:100);
        }

        #banner > ul > li > img {
            width: 800px;
            height: 400px;
        }

        #direction {
            position: relative;
            display: none;
        }

        #direction > a {
            position: absolute;
            width: 60px;
            height: 60px;
            text-align: center;
            line-height: 60px;
            color: #fff;
            text-decoration: none;
            background: rgba(0, 0, 0, .5);
            /*font-size: 40px;*/
            top: 170px;
            opacity: 0.5;
            border-radius: 50%;
        }

        #direction > a > i {
            font-size: 25px;
        }

        #direction > a:nth-child(2) {
            right: 0;
        }

        #btn {
            position: absolute;
            bottom: 0;
            left: 340px;
        }

        #btn > a {
            float: left;
            margin-left: 10px;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background: #f40;
        }

        #btn > .active {
            background: #fff;
        }

JS代码

封装运动框架

// 完美运动框架
function move(obj, json, fn) {
    clearInterval(obj.timer);
    obj.timer = setInterval(function () {
        var bStop = true;
        for (var attr in json) {
            //先判断是否是透明度
            var iCur;
            if (attr == "opacity") {
                iCur = parseInt(parseFloat(getStyle(obj, attr)) * 100);
            } else {
                iCur = parseInt(getStyle(obj, attr));
            }
            //算速度
            var speed = (json[attr] - iCur) / 8;
            speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);

            if (json[attr] != iCur) {
                bStop = false;
            }
            if (attr == "opacity") {
                obj.style.opacity = (iCur + speed) / 100;
                obj.style.filter = "alpha(opacity:" + (iCur + speed) + ")"
            } else {
                obj.style[attr] = iCur + speed + 'px';
            }
        }
        if (bStop) {
            clearInterval(obj.timer);
            fn && fn();
        }
    }, 30)
}

 /*
        1、分析布局：
            定位布局
            li的透明度不断变化

        2、分析逻辑
                var iNow：隐藏   Next:显示

        6个li
        0 1 2 3 4 5


        下标     透明度      其他

         0        100          0

         1        100        下标为0的li变成了0

         2        100         下标为1的li变成0

         3        100       下标为2的li变成0



        var iNow =0  Next = 0;

        li[next] = 显示
            0
        iNOW = next
        li[inow] = 隐藏
        Next++

        li[next] = 显示
            1
        inow = next;
        li[iNow] = 隐藏
        Next++

        li[next] = 显示
            2
     */
    var banner = document.getElementById("banner");
    var direction = document.getElementById("direction");
    var aLi = document.querySelectorAll("#banner>ul>li");
    var dir = document.querySelectorAll("#direction>a");
    var aBtn = document.querySelectorAll("#btn>a");
    var iNow = 0, Next = 0;
    var timer = null;

    for (var i = 0; i < aBtn.length; i++) {
        aBtn[i].index = i;
        aBtn[i].onmouseover = function () {
            for (var j = 0; j < aBtn.length; j++) {
                aBtn[j].className = "";
                move(aLi[j], {opacity: 0});
            }
            this.className = "active";
            //移入的时候让当前这个li显示
            move(aLi[this.index], {opacity: 100});
            //因为next与this.index不是同一个东西 因此需要他们两个同步
            Next = this.index;
            iNow = Next;
        }
    }

    //点击左边的按钮
    dir[0].onclick = function () {
        if (Next == 0) {
            Next = aLi.length - 1;
        } else {
            Next--;
        }

        toImg();
    };

    //点击右边的按钮
    dir[1].onclick = function () {
        if (Next == aLi.length - 1) {
            Next = 0;
        } else {
            Next++;
        }
        toImg()
    };

    //移入的时候变亮
    dir[0].onmouseover = function () {
        this.style.opacity = "1";
    };
    dir[1].onmouseover = function () {
        this.style.opacity = "1";
    };
    //移出的时候变暗
    dir[0].onmouseout = function () {
        this.style.opacity = "0.5";
    };
    dir[1].onmouseout = function () {
        this.style.opacity = "0.5";
    };

    //移入的时候轮播停止
    banner.onmouseover = function () {
        clearInterval(timer);
        direction.style.display = "block";
    };
    //移出的时候轮播继续
    banner.onmouseout = function () {
        autoPlay();
        direction.style.display = "none";
    };

    autoPlay();

    //自动轮播
    function autoPlay() {
        timer = setInterval(function () {
            if (Next == aLi.length - 1) {
                Next = 0;
            } else {
                Next++;
            }
            toImg()
        }, 2000)
    }

    //运动原理
    function toImg() {
        move(aLi[iNow], {opacity: 0});
        move(aLi[Next], {opacity: 100});
        iNow = Next;
        for (var i = 0; i < aBtn.length; i++) {
            aBtn[i].className = "";
        }
        aBtn[Next].className = "active";
    }