原生js轮播图的实现

1. 轮播图总体分析

上面就是一个完整轮播图的整体效果图，可以从上分析，大致可以分为以下几个模块:

• 图片展示模块
• 右下角的数字导航
• 上一张，下一张

2. 轮播图具体分析

• HTML布局，布局思路是:最外层的box是相对定位，imgbox正常布局，左右箭头采用绝对定位，来控制垂直居中，数字导航也采用绝对定位。

<!--最外层容器-->
<div class="box" id="box">
    <!--图片容器-->
    <div class="imgbox" id="imgbox">
        <a href="#" class="show"><img src="img/img4.jpg" alt="img4"></a>
        <a href="#" class="hide"><img src="img/img5.jpg" alt="img5"></a>
        <a href="#" class="hide"><img src="img/img6.jpg" alt="img6"></a>
        <a href="#" class="hide"><img src="img/img7.jpg" alt="img7"></a>
    </div>


    <!--左右箭头-->
    <a class="prev" id="prev">&lt;</a><a class="next" id="next">&gt;</a>

    <!--数字导航-->
    <div id="points" class="points">
        <ul>
            <li><a href="#" class="active">1</a></li>
            <li><a href="#">2</a></li>
            <li><a href="#">3</a></li>
            <li><a href="#">4</a></li>
        </ul>
    </div>

• css样式，要注意的就是设置inline-block后的空隙问题以及ie6,7兼容问题，绝对布局是相对有定位的父布局(除static外的布局)，html元素的垂直居中，具体看代码注释。

* {
    margin: 0;
    padding: 0;
}

a {
    text-decoration: none;
    display: block;
}

.box {
    width: 186px;
    height: 124px;
    position: relative;
}

.imgbox {

    font-size: 0;
    /*解决inline-block的空隙问题*/
}

/*图片的显示控制*/
img {
    width: 186px;
    height: 124px;
    display: block;
    /*可以解决一些样式不一致问题*/
    border: none;
}
/*数字导航容器定位*/
.points {
    position: absolute;
    right: 0px;
    bottom: 5px;
    font-size: 0;
}

.points ul {
    list-style: none;
}

.points li {
    border-left: 1px solid #fff;
    display: inline-block;
    *display: inline;
    *zoom: 1;
}


/*数字导航正常样式*/
.points a {
    width: 20px;
    height: 20px;
    line-height: 20px;
    display: inline-block;
    *display: inline;
    *zoom: 1;
    text-decoration: none;
    background-color: orange;
    text-align: center;
    color: #fff;
    font-size: 12px;
    cursor: pointer;
}

/*show控制图片显示，hide控制图片隐藏*/
.show {
    display: block;
}

.hide {
    display: none;
}
/*数字导航鼠标滑过效果*/
.points a:hover, .points .active {
    background-color: #FF4500;
}

/*左右两按钮正常展示效果*/
.prev, .next {
    width: 24px;
    height: 36px;
    text-align: center;
    display: inline-block;
    *display: inline;
    *zoom: 1;
    color: #fff;
    background-color: rgba(0, 0, 0, .3);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4d000000', endColorstr='#4d000000', GradientType=0);
    line-height: 36px;
    font-size: 14px;
    cursor: pointer;
}

/*左右两按钮滑过效果*/
.prev:hover, .next:hover {
    background-color: rgba(0, 0, 0, .5);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#80000000', endColorstr='#80000000', GradientType=0);
}

/*左右两个按钮设置垂直居中*/

.prev {
    position: absolute;
    top: 50%;
    left: 0;
    margin-top: -18px;
}
.next {
    position: absolute;
    top: 50%;
    right: 0;
    margin-top: -18px;
}

• js逻辑实现，核心逻辑就是循环播放图片，核心函数就是setInterval(nextSlider,1000),涉及到鼠标移入移出的停止和播放，点击按钮的上一张下一张，数字导航点击到具体某一张幻灯片以及数字导航的样式改变处理，以及闭包产生的事件绑定处理问题。

window.onload = function(){

    // getElementsByClassName()ie9才支持
    //轮播的一个索引值
    var index = 0;
    //定时器
    var timer = null;
    //最外层容器
    var box = document.getElementById("box");
    //图片容器
    var imgbox = document.getElementById("imgbox");
    //图片的超链接
    var as = imgbox.getElementsByTagName("a");
    //数字导航的父容器
    var points = document.getElementById("points");
    //数字导航数组
    var pointsA = points.getElementsByTagName("a");
    //上一张，下一张
    var prev = document.getElementById("prev");
    var next = document.getElementById("next");

    //循环播放核心
    timer = setInterval(nextSlider, 1000);
    //下一张
    function nextSlider(){

        index++;

        if(index>as.length-1){
            index = 0;
        }
        changeStyle(index);

    }
    //上一张
    function preSlider(){

        index--;
        if(index<0)
            index= as.length-1;
        changeStyle(index);
    }

    //具体控制图片的显示隐藏和按钮样式改变
    function changeStyle(index){

        for(var i=0;i<as.length;i++){
            if(index == i){
                as[i].className = "show";
                pointsA[i].className = "active";
            }else{
                as[i].className = "hide";
                pointsA[i].className = "";
            }
        }

    }

    //对数字导航按钮进行事件绑定，注意闭包

    for (var j = 0; j<pointsA.length; j++) {

        (function(j){
            pointsA[j].onclick =function(){

                changeStyle(j);
            }
        })(j);
    }

    //对上一张按钮进行事件绑定
    prev.onclick = function(){
        preSlider();
    }
    //对下一张按钮进行事件绑定
    next.onclick = function(){
            nextSlider();
    }
    //当鼠标放上去时清除定时器
    box.onmouseover = function(){

        clearInterval(timer);
    }
    //当鼠标离开时重新启动定时器
    box.onmouseout = function(){
        timer = setInterval(nextSlider, 1000);
    }
}

3. 总结

经过测试，这个例子可以兼容ie6,7等。通过此案例你可以学到以下内容:

1. css:绝度定位和相对定位，inline-block以及产生的问题。
2. html:搭建页面的基本结构。
3. js:定时器的使用，事件的处理，闭包产生的问题，DOM的操作。

最后说一句，博客难免有疏漏之处，望各位大神多多指教。

代码地址:
轮播图demo下载地址