用js写图片轮播

该篇文章首发于我的个人博客：http://cherryblog.site/ 使用github+coding+hexo搭建的静态博客，更多文章请移步至我的个人博客

window.onload = function () {  //在加载完整个页面的时候开始调用

//获取到container，list，button，prev，next五个元素
        var container = document.getElementById("container");
        var list = document.getElementById("list");
        var button = document.getElementById("button").getElementsByTagName('span');
        var prev = document.getElementById("prev");
        var next = document.getElementById("next");

        var index = 1;
        var animated = false;


//显示下面小圈圈到对应图片是红色的
        function showButton() {
            for (var i = 0; i < button.length; i++) {
                if (button[i].className == 'on') {
                    button[i].className = '';
                    break;
                }
            }
            button[index - 1].className = 'on';
        }


        function animate(offset) {


            animated = true;

            var newLeft = parseInt(list.style.left) + offset;
            var time = 300;//位移总时间
            var interval = 10;//位移间隔时间
            var speed = offset / (time / interval);//每次位移量

            function go() {
                if ((speed < 0 && parseInt(list.style.left) > newLeft) || (speed > 0 && parseInt(list.style.left) < newLeft)) {
                    list.style.left = parseInt(list.style.left) + speed + 'px';
                    setTimeout(go, interval);

                }
                else {
                    animated = false;
                    list.style.left = newLeft + 'px';
                    if (newLeft > -600) {
                        list.style.left = -3000 + 'px';
                    }
                    if (newLeft < -3000) {
                        list.style.left = -600 + 'px';
                    }

                }
            }

            go();


        }

        function play(){
            timer = setInterval(function(){
                next.onclick();},3000)
        }

        function stop(){
            clearInterval(timer);
        }

        next.onclick = function () {
            if (index == 5) {
                index = 1;
            }
            else {
                index += 1;
            }


            showButton();
            if (animated == false) {
                animate(-600);
            }
        }

        prev.onclick = function () {
            if (index == 1) {
                index = 5;
            }
            else {
                index -= 1;
            }
            showButton();
            if (animated ==false) {
                animate(600);
            }
        }


        for (var i = 0; i < button.length; i++) {
            button[i].onclick = function () {
                if (this.className == 'on') {
                    return;
                }
                var myIndex = parseInt(this.getAttribute('index'));
                var offset = (myIndex - index) * (-600);

                index = myIndex;
                showButton();
                if(!animated){
                    animate(offset);
                }
            }
        }
        container.onmouseover = stop;
        container.onmouseout =play;

        play();
    }

html页面：

<div id="container" class="layout-in ">
                <div id="list" style="left: -580px">
                    <img src="images/5.jpg" alt=""/>
                    <img src="images/1.jpg" alt=""/>
                    <img src="images/2.jpg" alt=""/>
                    <img src="images/3.jpg" alt=""/>
                    <img src="images/4.jpg" alt=""/>
                    <img src="images/5.jpg" alt=""/>
                    <img src="images/1.jpg" alt=""/>
                </div>
                <div id="button">
                    <span class="on" index="1">●</span>
                    <span index="2">●</span>
                    <span index="3">●</span>
                    <span index="4">●</span>
                    <span index="5">●</span>

                </div>
                <a href="javascript:" class="arrow" id="prev"></a>
                <a href="javascript:" class="arrow" id="next"></a>
            </div>

css：

#container {
    width: 580px;
    height: 260px;
    overflow: hidden;
    position: relative;
    margin-top: 1.4%;
    margin-left: 9px;

}

#list {
    position: absolute;
    width: 4060px;
    height: 400px;

}

#list img {
    width: 580px;
    height: 260px;
    float: left;
}

#button{
    position: absolute;
    width: 580px;
    height: 20px;
    text-align: center;
    z-index: 999;
    bottom: 10px;
    color: lightgrey;
}

#button span{
    cursor: pointer;
}

.arrow{
    width:35px;
    height: 80px;
    z-index: 999;
    position: absolute;
    background:url(../images/arrow.png);

}


#prev{

    background-position: 0 0;
    background-size: 70px 80px;
    margin-top: 95px;
    left: 20px;
    position: absolute;


}

#next{

    background-position: -35px 0;
    background-size: 70px 80px;
    margin-top: 95px;
    right: 20px;
    position: absolute;
}

.on{
    color: #c41d26;
}