JS 预加载2

单独的图片预加载已经完成，这里我们为上一张和下一张图片预加载做个准备。

主要就是先将上一张和下一张的大图同时加载，在同一个图片点击事件中（当某个图片被click后）。

首先就是我们要获取到上一张和下一张的图片索引位置，再通过这个值计算后来锁定对应的图片。

首先我们先获取当前图片父元素的父元素的索引位置，这里要先说名一下关系链：

div----dl----dt----img

//这里获取到的是dl元素，每个dl元素里面都有一个img，所以索引值是一样的
var children = this.parentNode.parentNode;

获取到dl后我们要再得到这个元素在dl元素数组中的索引值，之前我们写过一个函数index()，这个可以获取对于的索引值，于是

$(children).index()

获取到对于索引值后我们还要计算再得到需要的值，那么有下面几种情况：

当图片是第一张时，上一张图片要为最后一张，下一张就是索引值+1；
当图片是最后一张时，下一张要是第一张，上一张就是索引值-1；
正常情况，上一张是索引值-1，下一张是索引值+1；

那么做一个通用函数：

//获取某一个节点的上一个节点
function prevIndex(current,parent){
    var length = parent.children.length;
    if(current == 0) return lenght - 1;
    return current - 1;
}

//获取某一个节点的下一个节点
function nextIndex(current,parent){
    var length = parent.children.length;
    if(current == length -1) return 0;
    return current + 1;
}

//获得上一张和下一张的索引值
    var prev = prevIndex($(children).index(),children.parentNode);
        var next = nextIndex($(children).index(),children.parentNode);

children这个方法是获取当前元素下的子元素集合，不包括子元素下的子元素，也不会包含空白元素。

得到索引值后，我们再分别创建两个图片元素，也是new方法创建，然后再将对于图片元素的大图src地址获取到即可。

//创建用于储存预加载图片的元素
        
        var prev_img = new Image();
        var next_img = new Image();
        
        prev_img.src = $('#photo dl dt img').getElementBase(prev).attr('bsrc');
        next_img.src = $('#photo dl dt img').getElementBase(next).attr('bsrc');

假设我们点击的是第3张图片，那么他的上一张p2big，下一张上p4big!