jQuery+swiper仿微信朋友圈图片放大查看预览代码

来源:https://www.sucaihuo.com/js/3849.html 2018-08-04 11:29浏览(4339) 收藏

jQuery+swiper仿微信朋友圈图片放大查看预览代码,手机网页点击小图放大查看大图代码。
jQuery+swiper仿微信朋友圈图片放大查看预览代码
分类:图片代码 > 缩略图 难易:初级
查看演示 下载资源 下载积分: 20 积分

js代码

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/rem.js"></script>
<script type="text/javascript" src="js/swiper.min.js"></script>
<script>
$(document).ready(function(){
  /*调起大图 S*/
   var mySwiper = new Swiper('.swiper-container2', {
        loop: false,
        pagination: '.swiper-pagination2',
        })
    $("#list").on("click", ".post img", 
    function() {
        var imgBox = $(this).parents(".post").find("img");
        var i = $(imgBox).index(this);
        $(".big_img .swiper-wrapper").html("")

        for(var j = 0 ,c = imgBox.length; j < c ;j++){
         $(".big_img .swiper-wrapper").append('<div class="swiper-slide"><div class="cell"><img src="' + imgBox.eq(j).attr("src") + '" / ></div></div>');
        }
        mySwiper.updateSlidesSize();
        mySwiper.updatePagination();
        $(".big_img").css({
            "z-index": 1001,
            "opacity": "1"
        });
        mySwiper.slideTo(i, 0, false);
        return false;
    });
  
    $(".big_img").on("click", 
    function() {
        $(this).css({
            "z-index": "-1",
            "opacity": "0"
        });

    });
  });
  /*调起大图 E*/
</script>
评论1
头像

系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791

  • 头像 沙发
    11-03 16:32
    h***8
    示爱就换个号
    08-06 07:48不***火
    回复
    非常不错的功能
1 2