用原生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="##"><</a>
        <a href="##">></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;
            overflow: hidden;
        }

        #banner > ul {
            position: absolute;
        }

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

        #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: 55px;
            color: #fff;
            text-decoration: none;
            background: rgba(0, 0, 0, .5);
            font-size: 40px;
            top: 170px;
            opacity: 0.5;
            border-radius: 50%;
        }

        #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)
}

var ul = document.getElementById("banner").getElementsByTagName("ul")[0];
    var aLi = ul.getElementsByTagName("li");
    var iw = aLi[0].offsetWidth;
    var aBtn = document.getElementById("btn").getElementsByTagName("a");
    var dir = document.getElementById("direction").getElementsByTagName("a");
    var iNow = 0;
    var timer = null;

    //首先复制一张图片放在ul的最后面
    var li = aLi[0].cloneNode(true);
    ul.appendChild(li);
    //算ul的宽度
    ul.style.width = aLi.length * iw + 'px';

    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 = "";
            }
            this.className = "active";
            move(ul, {left: -(this.index) * iw});
            iNow = this.index;
        }
    }

    //点击左边的按钮的时候
    dir[0].onclick = function () {
        if (iNow == 0) {
            //当iNow为0的时候下次出现的图片应该是length-2
            iNow = aLi.length - 2;
            //为了不出现回啦的感觉 我们让ul的left值为 length-1*iw的宽度
            ul.style.left = -(aLi.length - 1) * iw + 'px';
        } else {
            iNow--;
        }

        toImg();
    };
    //点击右边的按钮的时候
    dir[1].onclick = function () {
        if (iNow == aLi.length - 1) {
            //因为下一次显示要从下标为1的开始
            iNow = 1;
            //为了不出现回啦的那种感觉 我们瞬间让ul的left值为0
            ul.style.left = 0;
        } else {
            iNow++;
        }
        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 (iNow == aLi.length - 1) {
                //因为下一次显示要从下标为1的开始
                iNow = 1;
                //为了不出现回啦的那种感觉 我们瞬间让ul的left值为0
                ul.style.left = 0;
            } else {
                iNow++;
            }
            toImg()
        }, 2000)
    }

    //轮播原理
    function toImg() {
        move(ul, {left: -iNow * iw});
        for (var i = 0; i < aBtn.length; i++) {
            aBtn[i].className = "";
        }
        aBtn[iNow == aLi.length - 1 ? 0 : iNow].className = "active";
    }