js实现首页图片的轮播效果

在大多数的网站里面首页都会有一个图片轮播的效果，而我们开发者要实现这种效果要么是使用第三方插件，要么是使用js自己写函数来实现这种效果，而我自己就是自己写js来实现这种效果，首先，我们来看一下最终完成的效果：

这个就是最终实现的效果，下面我们来分析一下原理，我们打开一个拥有这种效果的网页，然后按f12，然后选中那个div，就可以看到下面这种效果：

我们可以看到，这上面有5个div,给它分配一个class叫做slider-panel,继续看，可以看到这些div拥有一个style属性，可以看到我们实现轮播效果就是动态的改变div的style属性，接下来就是介绍源码了。
首先在html中定义几个需要轮播的div,如下：

 <div class="slider-content">
    <div class="slider-panel" style="z-index: 1; display: block;">
        <a href="#"><img src="image/3.png" width="520px" height="210px"></a>
    </div>
    <div class="slider-panel" style="z-index: 0; display: none;">
        <a href="#"><img src="image/4.png" width="520px" height="210px"></a>
    </div>
    <div class="slider-panel" style="z-index: 0; display: none;">
        <a href="#"><img src="image/5.png" width="520px" height="210px"></a>
    </div>
    <div class="slider-panel" style="z-index: 0; display: none;">
        <a href="#"><img src="image/6.png" width="520px" height="210px"></a>
    </div>
    <div class="slider-panel" style="z-index: 0; display: none;">
        <a href="#"><img src="image/7.png" width="520px" height="210px"></a>
    </div>
</div>

这上面是需要轮播的div，好了，写完这些，就可以开始js的编写了：

//代表这里面有多少个图片需要轮播
var num = 4;
//代表上面定义id为slider的div块的原型对象
function slider(id) {
    //保存代表id所指向的元素
    this.e = document.getElementById(id);
    //获取class属性为slider-content的div
    var picDiv = this.e.getElementsByClassName("slider-content");
    //获取class属性为slider-panel的div
    var picPanels = picDiv[0].getElementsByClassName("slider-panel");
    //div图像
    this.picPanels = new Array;
    for(var i in picPanels) {
        if( typeof picPanels[i] === "object") {
            this.picPanels[i] = new div(picPanels[i]);
        }
    }
    //当前显示的div
    this.currentPosition = 0;
    //下一个需要显示的div
    this.nextPosition = 1;
}

按照上面的注释已经说的差不多了，那里面有这么一行代码：

this.picPanels[i] = new div(picPanels[i]);

这里有一个自定义div对象，就是将class属性为slider-panel的div包装了一下，下面来看下它的定义：

//定义一个对象代表每个图片div对象
function div(obj) {
    //this.e保存div对象
    this.e = obj;
    //这个对象的style数组
    this.style = new Array;
    this.style["z-index"] = 0;
    this.style["display"] = "none";
    this.style["opacity"] = 0;
    this.style["background"] = "";
}

这里的this.style其实就是代表class属性为slider-panel这个div里面的style属性，我现在只是把它拆开了，为的是要改变它的值方便，而那里面的this.e=obj,这个才是div对象，这个div对象还有一个方法，那就是获取自己的style属性，因为动态改变嘛，所以需要时不时的获取style属性然后设置上去：

//获取div对象的属性
div.prototype.getStyle = function() {
    var s = "z-index: " + this.style["z-index"] + "; display: " + this.style["display"] + 
    "; ";
    if( this.style["z-index"] === 2) {
        s += "opacity: " + this.style["opacity"];
    }
    return s;
}

好了，将这两个div封装完整之后，现在开始一个最核心的函数了，那就是slider原型对象的showNext()方法，这个方法用来显示下一个div:

//显示下一个
slider.prototype.showNext = function(obj) {
    //当前显示的div对象
    var currentObj = obj.picPanels[obj.currentPosition];
    //下一个需要显示的div对象
    var nextObj = obj.picPanels[obj.nextPosition];
    //设置下一个要显示的对象的z-index属性为2
    nextObj.style["z-index"] = 2;
    //下一个对象的display属性
    nextObj.style["display"] = "block";
    nextObj.style["opacity"] = 0;
    //接下来nextObj的opacity的属性要从0到1切换
    for(var i = 0; i < 1000; i++) {
        setTimeout(function() {
            //增长的步长
            var step = 1 / 1000;
            nextObj.style["opacity"] += step;
            //获取此时的属性
            var style = nextObj.getStyle();
            console.log("style:" + style + "\tcurrentObj-before:" + currentObj.getStyle());
            nextObj.e.setAttribute("style", style);
            //如果此时这个图片的opacity属性切换到了1的动作
            if( nextObj.style["opacity"] >= 1) {
                currentObj.style["z-index"] = 0;
                currentObj.style["display"] = "none";
                console.log("currentObj:" + currentObj.getStyle());
                //设置当前的属性
                nextObj.style["z-index"] = 1;
                console.log("nextObj:" + nextObj.getStyle());
                currentObj.e.setAttribute("style", currentObj.getStyle());
                //更改游标的位置
                obj.currentPosition = obj.nextPosition;
                obj.nextPosition = (++obj.nextPosition) % num === 0 ? num : obj.nextPosition % num;
            }
        }, 3000);
    }

}

这里面有一个比较难理解的地方，那就是这个函数的形参obj,其实这个obj如果将这个showNext()当作slider对象的成员函数使用就是this,但是这个时候因为我们这个showNext()必须要一直调用，为了要实现轮播：

//开始循环切换
slider.prototype.start = function() {
    setInterval(this.showNext, 3000, this);
    // this.showNext(this);
}

使用这个setInterval()函数之后这个showNext()函数就不属于slider这个对象的了，所以需要先保存this

obj.nextPosition = (++obj.nextPosition) % num === 0 ? num : obj.nextPosition % num;

这一行代码属于计算下一位置，便于取出下一要滑动的div对象，这里面还使用了setTimeout函数，这个函数是延时函数，如果不使用这个函数的话，就体现不出来改变的效果了。下面开始调用：

//当页面加载完成的时候创建对象，否则document未创建完成
window.onload = function() {
    div = new slider("slider");
    //设置第一个图像的内容
    var firstDiv = div.picPanels[0];
    firstDiv.style["z-index"] = 1;
    firstDiv.style["display"] = "block";
    //图片开始切换
    div.start();
}

再补充一点，如果直接按照上面的运行会出现一些不想要的效果，我们得需要设置单独写一些css属性：

#slider .slider-content {
    min-width: 520px;
    height: 210px;
    position: relative;
    overflow: hidden;
}

#slider .slider-panel {
    position: absolute;
    left : 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: none;
}