JS预加载3

这次我们来做上一张和下一张按钮，HTML部分直接贴出来，反正就是strong元素只是做个显示展示，不做操作，然后在他的顶部覆盖一层span元素，这个元素做操作层。

效果图：

html代码：

div class="">
    <div id="photo_masked"></div>
    <div id="photo_big">
        <i class="photo_off"><span class="off">+</span></i>
        <h2 id="photo_title">预加载图片</h2>
        <div class="big">
            <img src="images/loading.gif" alt=""  class=""/>
            <strong class="sl">&lt;</strong>
            <strong class="sr">&gt;</strong>
            <span class="left"></span>
            <span class="right"></span>
        </div>
    </div>
</div>

css部分就不多说了，没啥高端操作，position: absolute;定位就行，span元素两个左右对半平分图片的宽度。

js部分，首先我们对hover做一个反馈，因为默认strong元素是透明的，当鼠标移动到左边的span上时，显示strong，移动到右边时，左边的strong透明，右边的显示。

//显示上一张下一张图标
    $('#phpoto_big .big .left').hover(function(){
        $('#phpoto_big .big .sl').animation({
            'attr' : 'o',
            'end' : 50,
            'time' : 30
        });
    },function(){
        $('#phpoto_big .big .sl').animation({
            'attr' : 'o',
            'end' : 0,
            'time' : 30
        });
    });
    $('#phpoto_big .big .right').hover(function(){
        $('#phpoto_big .big .sr').animation({
            'attr' : 'o',
            'end' : 50,
            'time' : 30
        });
    },function(){
        $('#phpoto_big .big .sr').animation({
            'attr' : 'o',
            'end' : 0,
            'time' : 30
        });
    });

显示效果做好后就是对图片做一个切换，当点击左边的时候切换到上一张图片。

之前我们已经对左右两张大图做了缓存，当你点击一张后会自动缓存左右的两张，我们只需要将缓存好的图片地址拿给弹窗显示的img即可。

因为缓存左右两张大图的操作是在img.click事件中的，而我们切换是在span.click中的，所以还需要将之前的图片地址放入对应左右两个span元素中去，也是自定义一个src属性。

//将图片地址传出去
        $('#phpoto_big .big .left').attr('src',prev_img.src);
        $('#phpoto_big .big .right').attr('src',next_img.src);

图片地址传出去后，我们便可以获取到然后再修改。

//上一张
    $('#phpoto_big .big .left').click(function(){
        $('#phpoto_big .big img').attr('src',$(this).attr('src'));


    });

这样单次操作完成了，但是只能点击一次，第二次就无效了，所以我们点击后还要再次获取左右两张大图。

首先我们先获取到当前元素的索引值，然后就可以和之前预加载2中的一样，通过两个方法获取到左右两张的索引值。

但是我们无法直接获取到这个索引，因为你是span的click事件，并不是img的，那么我们将img的索引先传出来，丢给弹窗中img，自定义一个属性保存。

//将点击的图片索引值传出去
        $('#phpoto_big .big img').attr('index',$(children).index());

这样我们点击图片后，当前图片的索引值传入img自定义属性index中，然后我们点击上一张的时候再计算一下。

//点击上一张后再次获取当前图片索引值

prevIndex(parseInt($('#phpoto_big .big img').attr('index')),$('#photo').first())

//$('#phpoto_big .big img').attr('index') 这个获取到之前传入的索引值
//但是这个索引值是string类型不能用于计算，这里用parseInt（）转换，保留整数并转换为Number类型
//然后通过prevIndex()计算出上一个，这个上一个也就是本身的索引值，父元素使用$('#photo').first()，因为#photo中每个dl都对应一个img，这里使用photo合适。

获取到当前索引后，我就可以获取到当前元素，然后通过parentNode获取到dl元素，然后再使用prevIndex()计算出上一张的索引，然后故技重施，将预加载2中的代码再运行一次

//上一张
    $('#phpoto_big .big .left').click(function(){
        $('#phpoto_big .big img').attr('src',$(this).attr('src'));
        var children = $('#phpoto dl dt img').getElemet(prevIndex(parseInt($('#phpoto_big .big img').attr('index')),$('#photo').first())).parentNode.parentNode;

        var prev = prevIndex($(children).index(),children.parentNode);
        var next = nextIndex($(children).index(),children.parentNode);


        //创建用于储存预加载图片的元素

        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');

        //将图片地址传出去
        $('#phpoto_big .big .left').attr('src',prev_img.src);
        $('#phpoto_big .big .right').attr('src',next_img.src);
        //将点击的图片索引值传出去
        $('#phpoto_big .big img').attr('index',$(children).index());

    });

这样写就可以了，但是很大一串都重复了，我们将重复的部分封装一下：

function prev_next_img(children){
        var prev = prevIndex($(children).index(),children.parentNode);
        var next = nextIndex($(children).index(),children.parentNode);


        //创建用于储存预加载图片的元素

        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');

        //将图片地址传出去
        $('#phpoto_big .big .left').attr('src',prev_img.src);
        $('#phpoto_big .big .right').attr('src',next_img.src);
        //将点击的图片索引值传出去
        $('#phpoto_big .big img').attr('index',$(children).index());
    };

调用部分：

//上一张
    $('#phpoto_big .big .left').click(function(){
        $('#phpoto_big .big img').attr('src',$(this).attr('src'));
        var children = $('#phpoto dl dt img').getElemet(prevIndex(parseInt($('#phpoto_big .big img').attr('index')),$('#photo').first())).parentNode.parentNode;

        prev_next_img(children)

    });

    //下一张
    $('#phpoto_big .big .right').click(function(){
        $('#phpoto_big .big img').attr('src',$(this).attr('src'));
        var children = $('#phpoto dl dt img').getElemet(nextIndex(parseInt($('#phpoto_big .big img').attr('index')),$('#photo').first())).parentNode.parentNode;

        prev_next_img(children)

    });

至此已经完成。

效果图：