仿朋友圈图片查看功能

最新推荐文章于 2023-11-02 16:10:05 发布

seven_an

最新推荐文章于 2023-11-02 16:10:05 发布

阅读量3.4k

点赞数

分类专栏： javascript 文章标签：微信朋友圈图片查看 swiper js

本文链接：https://blog.csdn.net/seven_an/article/details/77509779

版权

javascript 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

准备

swiper

下载swiper轮播图插件，官网：http://www.swiper.com.cn/download/index.html
只需要swiper.min.js 和 swiper.min.css 即可版本不限。
jquery.js

css

 #imglist img{
    width: 20%;
    height: 70px;
    float: left
}
.swiper-container{
    position: fixed; 
    top: 0px; 
    left: 0px;
    right: 0;
    bottom: 0; 
    background: rgba(0, 0, 0, 0.7); 
    z-index: 99; 
    width: 100%; 
    height: 100%;
    display: none
}

html

<!-- 引入上述准备的相关文件-->
<!-- 缩略图 -->
    <div id="imglist">  
        <!-- 此处是动态数据 -->
    </div> 
 <!--此处轮播图-->
<div>
    <div class="swiper-wrapper" style="">
        <!-- 此处是动态数据 -->
    </div>
    <div class="swiper-pagination"></div>
</div>

//img为图片数组
var img=['1.jpg','2.jpg','3.jpg']
for(var i=0; i<img.length;i++){
    var str=' <img class="pimg" src='+img[i]+' onclick="change('+i+')"/>' 
    $("imglist").append(str); //缩略图
    var str1='<div class="swiper-slide"><img src='+img[i]+' alt=""></div>';
    $(".swiper-wrapper").append(str1) //图片展示
    name(i); 
}
//对图片进行缩放调整
function name(i){
    $(".swiper-container .swiper-slide").eq(i).find('img').attr("src", img[i]).load(function(){
     var windowW = $(window).width();
     var windowH = $(window).height();
     var realWidth = this.width;
     var realHeight = this.height;
     var scale = 1;
     var scaleW = 1;
     var scaleH = 1;
     var x=0;
     var y=0;
     if(realWidth>windowW ||realHeight>windowH){
         scaleW = windowW/realWidth;
         scaleH = windowH/realHeight;
         //计算一个缩放比例
         scale = Math.min(scaleW,scaleH);
     }
       realWidth *= scale;
        realHeight *= scale;
        x = (windowW - realWidth)/2;
        y = (windowH - realHeight)/2;
        $(".swiper-container .swiper-slide").eq(i).find('img').css("width",realWidth);
        var w = (windowW-realWidth)/2;
        var h = (windowH-realHeight)/2;
        $(".swiper-container .swiper-slide").eq(i).css({"top":h, "left":w});
    });
}
$(".swiper-container").click(function(){
    $(".swiper-container").hide()
})
Swiper1 = new Swiper ('.swiper-container', {
    preventLinksPropagation : false, //拖动时阻止click事件
    pagination: '.swiper-pagination', //下方圆点
    slidesPerView: 1, //容器同时显示slides的数量
    paginationClickable: true, //分页指示点可切换图片
    observer: true, //图片删除修改时，自动初始化swiper
     speed: 500,
     autoplayDisableOnInteraction: false, //用户操作后重启autoplay
 });          
function change(index){ //点击缩略图展示相关图片
    $(".swiper-container").show()
    Swiper1.slideTo(index,100,false);
}