• 我转过几个弯 绕过那个小雨楼
  • 拿着蒲扇摆着衣衫渡着紧箍咒
  • 不问天涯不停留 喝过几壶酒
  • 不过年少白头道义放胸口
  • 倘若明天之后 遥看前尘剑封侯
  • 似那天上神仙无所求
  • 朝朝暮暮君如梦醒十分不为何理由
  • 是真是假是惶恐是无休
  • 路过这风雨花满楼 片刻都不停留
  • 我本这书生进京赶考留下许多愁
  • 你问有没有时候 我叹这天道默悠悠
  • 能否与我一醉方休
  • 又过了几个弯 算尽天量道莫慌
  • 踏这田园闻这芳草香
  • 跌跌撞撞仗剑天涯折煞不枉无笔良
  • 是梦是幻是温柔是家乡
  • 路过这风雨花满楼 片刻都不停留
  • 我本这书生进京赶考留下许多愁
  • 你问有没有时候 我叹这天道默悠悠
  • 能否与我一醉方休
  • 路过这风雨花满楼 片刻都不停留
  • 我本这书生进京赶考留下许多愁
  • 你问有没有时候 我叹这天道默悠悠
  • 能否与我一醉方休
  • 谁能与我一醉方休

JS预加载3

147 0

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

至此已经完成。

效果图:

0
  • 本文分类:JavaScript
  • 本文标签:预加载上一张下一张
  • 流行热度:已超过 147 人围观了本文
  • 最后更新:2019年02月28日 - 22时35分07秒
  • 发布日期:2019年02月28日 - 22时33分00秒
  • 版权申明:本文系作者@木灵鱼儿原创发布在木灵鱼儿 - 有梦就能远航站点。未经许可,禁止转载。

相关文章

微信收款码
微信收款码