用原生js实现轮播图

今天分享一下简单的轮播图制作过程，用原生js实现。虽然网上有各种插件制作的高大上又好用的轮播图，但还是要清楚它的基本原理。

1.基本原理

将所有图片并排放到一个div中，然后再放到展示窗口当中，让装有所有图片的div通过改变left值，从而左右移动实现图片切换。

2.html代码

<div id="container">        <div id="list" style="left:-600px">            <img src="images/5.jpg" alt="5" />            <img src="images/1.jpg" alt="1" />            <img src="images/2.jpg" alt="2" />            <img src="images/3.jpg" alt="3" />            <img src="images/4.jpg" alt="4" />            <img src="images/5.jpg" alt="5" />            <img src="images/1.jpg" alt="1" />        </div>        <div id="buttons">            <span index="1" class="on"></span>            <span index="2"></span>            <span index="3"></span>            <span index="4"></span>            <span index="5"></span>        </div>        <a href="javascript:;" class="arrow" id="pre"><</a>        <a href="javascript:;" class="arrow" id="next">></a>    </div>

以一个有5张图片的轮播图为例，为了实现无缝滚动，需要在第一张图片前放置第五张图片，在第五张图片后放置第一张图片，把这七张图片放在一个id为list的容器里面，把显示当前所在页的五个小圆点放在button容器里面，左右切换的按钮则用两个a链接表示。这几个部分全放在container容器里面。

3.css代码

 * {        margin: 0;        padding: 0;        text-decoration: none;    }        #container {        margin: 20px;        width: 600px;        height: 400px;        border: 3px solid #333;        position: relative;        overflow: hidden;    }        #list {        /*七张图片*/        width: 4200px;        height: 400px;        position: absolute;        z-index: 1;    }        #list img {        float: left;        width: 600px;        height: 400px;    }        #buttons {        position: absolute;        height: 10px;        width: 100px;        z-index: 2;        bottom: 20px;        right: 100px;    }        #buttons span {        cursor: pointer;        float: left;        border: 1px solid #fff;        border-radius: 50%;        height: 10px;        width: 10px;        margin-right: 5px;        background: #333;    }        #buttons .on {        background: orangered;    }        .arrow {        display: none;        cursor: pointer;        line-height: 40px;        text-align: center;        font-size: 30px;        font-weight: bold;        width: 40px;        height: 40px;        position: absolute;        z-index: 2;        top: 180px;        color: #fff;        background-color: RGBA(0, 0, 0, .3);    }        .arrow:hover {        background-color: RGBA(0, 0, 0, .7);    }        #container:hover .arrow {        display: block;    }        #pre {        left: 20px;    }        #next {        right: 20px;    }

把七张图片设置为左浮动，宽度设置为600px，则放置这些图片的容器list的宽度为600*7px，想象一下七张图片水平并排的放在一起。对最外层的容器设置 overflow: hidden;width：600px，则能够显示出来的只有一张图片，其他图片都被隐藏。

当list的left值为-600px时，相对于图片向左移动了600px，则第二张图片显示出来（七张图片里面的第二张）。

要设置左右切换按钮和小圆点的Z-index值大于图片的值，这样按钮才会显现出来。

4.js代码

 function g(id) {        return document.getElementById(id);    }    window.onload = function() {        var next = g("next");        var list = g("list");        var pre = g("pre");        var buttons = g("buttons").getElementsByTagName("span");        var len = 5;        var index = 1;        var interval=3000;        var animated = false;        var timer; //全局变量        /*按钮显示*/        function showButton() {            for (var i = 0; i < buttons.length; i++) {                if (buttons[i].className == "on") {                    buttons[i].className = "";                    break;                }            }            buttons[index - 1].className = "on";        }        /*图片切换动画*/        function animate(offset) {            if (offset == 0) {                return;            }            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 {                    list.style.left = newLeft + 'px';                    /*如果当前是第五张图，就跳到第一张图*/                    if (newLeft > -200) {                        list.style.left = -600 * len + 'px';                    }                    if (newLeft < (-600 * len)) {                        list.style.left = '-600px';                    }                    animated = false;                }            }            go();        }        next.onclick = function() {            if (index == 5) {                index = 1;            } else {                index += 1;            }            showButton()            if (!animated) {                animate(-600);            }        }        pre.onclick = function() {            if (index == 1) {                index = 5;            } else {                index -= 1;            }            showButton();            if (!animated) {                animate(600);            }        }        /*按钮切换*/        for (var i = 0; i < buttons.length; i++) {            buttons[i].onclick = function() {                if (animated) {                    return false;                }                if (this.className == "on") {                    return false;                }                var myIndex = parseInt(this.getAttribute("index"));                var offset = 600 * (myIndex - index);                animate(offset);                index = myIndex;                showButton();            }        }        /*自动切换*/        function autoPlay() {             timer = setInterval(function() {                next.onclick();            }, interval);        }        function stop() {            clearInterval(timer);        }        g("container").onmouseover = stop;        g("container").onmouseout = autoPlay;        autoPlay();    }

g()函数可以通过id值找到对应元素，相对于jQuery里面的$(#id).

设置一个定时器，在规定的时间内，每隔interval时间移动一次，直到一张图片彻底切换完毕。当前图片为第五张图片时，跳转到第一张图片，当前图片为第一张图片时，跳转到第五张图片。

当鼠标离开轮播图时，使用定时器每隔一段时间就切换下一张图片，相对于调用了next.onclick函数当鼠标放在轮播图上时，当鼠标放在轮播图上时，停止计时器。

在线demo地址：轮播图效果展示

5.升级版

• 用js获取图片的数量和宽度，从而设置出对应数量的小圆点。
• 把函数进行封装，方便下次调用
• 可参考博客http://blog.csdn.net/diligentkong/article/details/55209861

6.其他

推荐一个很好用的轮播图插件-myFocus，使用方法特别简单，只需要在在html的标签内引入相关文件，再选择任意一个位置调用，就可以使用很多轮播图特效了，有多种切换效果，而且图片加载速度比原生js要快。