文章 - swiper 大图预览 | 前端网（QDFuns）

html 代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no minimal-ui">
    <meta charset="UTF-8">
    <title>Document</title>
    <link href="https://cdn.bootcss.com/Swiper/3.4.2/css/swiper.min.css" rel="stylesheet">
    <style>
        .showBigImg {
          display: none;
          position: fixed;
          left: 0;
          top: 0;
          width: 100%;
          height: 100%;
          background: rgba(0,0,0,.6);
          z-index: 999;
        }
        .showBigImg .closeBigImg {
          position: absolute;
          right: 35px;
          top: 35px;
          width: 50px;
          height: 50px;
          border-radius: 50%;
          background: #000;
          text-align: center;
          line-height: 45px;
          font-size: 45px;
          color: #fff;
          z-index: 9999;
          user-select: none;
        }
        .showBigImg .showBigImgWrap {
          position: relative;
          width: 100%;
          height: 100%;
          overflow: hidden;
        }
        .showBigImg .showBigImgWrap .allImgBox {
          position: relative;
          width: 100%;
          height: 100%;
        }
        .showBigImg .showBigImgWrap .allImgBox .imgIte {
          float: left;
          width: 100%;
          height: 100%;
          text-align: center;
        }
        .showBigImg .showBigImgWrap .allImgBox .imgIte span {
          display: inline-block;
          width: 0;
          height: 100%;
          vertical-align: middle;
        }
        .showBigImg .showBigImgWrap .allImgBox .imgIte img {
          max-width: 90%;
          max-height: 90%;
          vertical-align: middle;
        }
        .small-img img{
          width: 150px;
        }
    </style>
</head>
<body>
    <div class="small-img">

</div>

var myswiper = new Swiper('.showBigImgWrap',{
            pagination : '.swiper-pagination',
            prevButton:'.swiper-button-prev',
            nextButton:'.swiper-button-next'
        });

var outwrap = $('.showBigImg');
        var close = $('.closeBigImg');
        var box = $('.allImgBox');

close.click(function () {
            outwrap.fadeOut();
        });

//BigImg代码生成
        function BigImgSlide(srcArr,posi){

outwrap.fadeIn();

var str = '';
            for(var i=0; i<srcArr.length; i++){
                str += '<div class="imgIte swiper-slide"><span></span><img src="'+ srcArr[i]+'" alt=""></div>';
            }
            box.html(str);

var imgIte = $('.imgIte');
            imgIte.css({
                width: window.innerWidth,
                height: window.innerHeight
            });

myswiper.update();
            myswiper.slideTo(posi, 0);
        }

//图片点击
        $(function () {
            var img = $('.small-img img');
            img.click(function () {
                var arr = [];
                img.each(function () {
                    arr.push($(this).attr('src'));
                });
                BigImgSlide(arr, img.index(this));
            });
        });

</script>
</body>
</html>

swiper 大图预览

评论 ( 4 )

最新评论

swiper 大图预览

评论 ( 4 )

最新评论

欢迎您回来

创建账号

找回密码