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