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;}