首页 » JavaScript » JS预加载3

最后更新于 2019年02月28日

这次我们来做上一张和下一张按钮,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)
    
    });

至此已经完成。

效果图:

  • weixiao kaixin tushetou jingkong deyi fanu liezui liuhan daku ganga bishi nanguo lihai qian yiwen numu tu yi haixiu se fadai minyan hehe henkaixin huaji biyiyan kuanghan maimeng shui xiaku penqi zhangzui pen aini ye niu laji ok chigua renshi kongbu shuai xiaoxiese touxiao huaixiao jingnu chihuai kaisang xiaoku koubi zhuangbi lianhong kanbujian shafa zhijing xiangjiao dabian yaowan redjing lazhu rizhi duocang chixigua hejiu xixi xiaopen goukun xiaobuchu shenme wusuowei guancha lajing chouyan xiaochi bie zhadanzui zhadanxiao