Swiper实现图片预览效果

作者：娇娇jojo
日期：2018年3月13日

一、介绍

先用几张图来和大家描述一下什么是图片预览效果吧。
第一张图：

第二张图：

第三张图：

第四张图：

图一：图片列表；

图二：点击列表中 “小猫” 这张图片，会弹出图二这样的预览图；

图三：对图二向左或向右滑动会出现图三的样子，滑动的距离和区域小于某个值时，图片还是会回到当前这张图，超过某个值了，就会滑到上一张图或下一张图；

图四：对图二，向左滑动，并且超出界定的值了，滑到了 “小猫” 的下一张图片 “大海”。

二、实现

实现起来其实很简单，就是用Swiper，下面直接贴代码，我用的是Swiper4 。

1、HTML




    
 
 
 
 
 照片预览

2、LESS

body,
div,
p,
h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
ol,
li {
    margin: 0;
    padding: 0;
    list-style: none;
}

body {
    padding-top: constant(safe-area-inset-top);
    padding-left: constant(safe-area-inset-left);
    padding-right: constant(safe-area-inset-right);
    padding-bottom: constant(safe-area-inset-bottom);
}

img {
    display: block;
    border: 0;
    width: 100%;
}

.translateZ(@status) {
    transform: translateZ(@status);
    -webkit-transform: translateZ(@status);
    -moz-transform: translateZ(@status);
    -o-transform: translateZ(@status);
}

.flex {
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-box;
    display: flex;
    display: -webkit-flex;
    display: box;
}

.align-items(@status) {
    align-items: @status;
    -webkit-align-items: @status;
    -moz-align-items: @status;
    -ms-align-items: @status;
    -o-align-items: @status;
    -webkit-box-align: @status;
}

.flex-wrap(@status) {
    flex-wrap: @status;
    -webkit-flex-wrap: @status;
    -moz-flex-wrap: @status;
    -ms-flex-wrap: @status;
    -o-flex-wrap: @status;
}

body,
html {
    width: 100%;
    height: 100%;
}

body {
    background: #ff7981;
    font-size: 0.35rem;
    color: #707070;
    position: relative;
}

.all-works-box {
    box-sizing: border-box;
    padding: 2%;
    .flex;
    .flex-wrap(wrap);
    .all-works-li {
 background: #fff;
 width: 32%;
 margin-right: 2%;
 margin-bottom: 2%;
 box-sizing: border-box;
 padding: 1%;
 div {
     overflow: hidden;
     .flex;
     .align-items(center);
 }
    }
    .no-margin {
 margin-right: 0;
    }
    .user-name {
 padding: 1% 0;
 font-size: 0.3rem;
    }
}

.prompt-bg {
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    position: fixed;
    left: 0;
    top: 0;
    background: #000;
    .translateZ(1);
    overflow: hidden;
}

.swiper-container {
    height: 100%;
    .swiper-slide {
 .flex;
 .align-items(center);
 overflow: auto;
 overflow-scrolling: touch;
 -webkit-overflow-scrolling: touch;
 img{
     margin: auto; //解决flex布局overflow，并且图片超过屏幕高度时，图片无法滑动到顶部
 }
    }
}

.hide {
    display: none;
}

注：flex布局当overflow时无法滑动到顶部

3、JS

var index = {},
    mySwiper = null;

$(function($) {
    index.allWorks();

    mySwiper = new Swiper('.swiper-container', {
 observer: true, //启动动态检查器(OB/观众/观看者)，当改变swiper的样式（例如隐藏/显示）或者修改swiper的子元素时，自动初始化swiper。
 observeParents: true //将observe应用于Swiper的父元素。当Swiper的父元素变化时，例如window.resize，Swiper更新。
    });
})

index = {
    allWorks: function() { // 获取图片列表
 $.ajax({
     type: 'get',
     url: "json/works.json",
     success: function(res) {
  index.promptDataInit(res);

  var awardFrag = document.createdocumentFragment(),
      noMargin = "";

  $(".all-works-box").empty();
  $.each(res, function(index, item) {
      if((index + 1) % 3 == 0) {
   noMargin = "no-margin";
      } else {
   noMargin = "";
      }
      $(awardFrag).append('   ' + item.username + ' ');
  })
  $(".all-works-box").append($(awardFrag));

  index.clickPicpromptShow();
     }
 })
    },
    clickPicpromptShow: function() { //点击图片弹出大图
 $(".all-works-li div").height($(".all-works-li").width()); //展示的图片都是正方形

 $(".work").each(function() {
     var _this = this;
     index.tap($(this)[0], function() {
  var id = parseInt($(_this).attr("data-id")) - 1;
  mySwiper.slideTo(id);
  $(".prompt-bg").removeClass("hide");
     })
 })
    },
    promptDataInit: function(promptInfo) { //图片预览容器数据初始化
 $(".swiper-wrapper").empty();
 var promptFrag = document.createdocumentFragment();
 $.each(promptInfo, function(index, item) {
     $(promptFrag).append('');
 })
 $(".swiper-wrapper").append($(promptFrag));
    },
    tap: function(node, callback, scope) { //移动端的“点击”
 node.addEventListener("touchstart", function(e) {
     x = e.touches[0].pageX;
     y = e.touches[0].pageY;
 });
 node.addEventListener("touchend", function(e) {
     e.stopPropagation();
     var curx = e.changedTouches[0].pageX;
     var cury = e.changedTouches[0].pageY;
     if(Math.abs(curx - x) < 6 && Math.abs(cury - y) < 6) {
  callback.apply(scope, arguments);
     }
 });
    }
}

$(".prompt-bg").each(function() {
    index.tap($(this)[0], function() {
 $(".prompt-bg").addClass("hide");
    })
})

4、JSON

图片数据存在这个JSON里，所以那些图片信息都是动态获取的。

注：动态获取数据后再初始化Swiper会出现滑动卡顿的问题，为了解决这个问题，Swiper官网文档有observe 和 observeParents 这2个方法。

observer

启动动态检查器(OB/观众/观看者)，当改变swiper的样式（例如隐藏/显示）或者修改swiper的子元素时，自动初始化swiper。
默认false，不开启，可以使用update()方法更新。

observeParents

将observe应用于Swiper的父元素。当Swiper的父元素变化时，例如window.resize，Swiper更新。

[
    {
 "id":"1",
 "imgSrc": "img/1.jpg",
 "username":"星星"
    },
    {
 "id":"2",
 "imgSrc": "img/2.jpg",
 "username":"月亮"
    },
    {
 "id":"3",
 "imgSrc": "img/3.jpg",
 "username":"星星"
    },
    {
 "id":"4",
 "imgSrc": "img/4.jpg",
 "username":"星星"
    },
    {
 "id":"5",
 "imgSrc": "img/5.jpg",
 "username":"星星."
    },
    {
 "id":"6",
 "imgSrc": "img/6.jpg",
 "username":"星星."
    },
    {
 "id":"7",
 "imgSrc": "img/7.jpg",
 "username":"星星"
    },
    {
 "id":"8",
 "imgSrc": "img/8.jpg",
 "username":"星星"
    },
    {
 "id":"9",
 "imgSrc": "img/9.jpg",
 "username":"星星"
    },
    {
 "id":"10",
 "imgSrc": "img/10.jpg",
 "username":"星星"
    },
    {
 "id":"11",
 "imgSrc": "img/11.jpg",
 "username":"星星 -"
    },
    {
 "id":"12",
 "imgSrc": "img/12.jpg",
 "username":"星星"
    },
    {
 "id":"13",
 "imgSrc": "img/13.jpg",
 "username":"星星"
    },
    {
 "id":"14",
 "imgSrc": "img/1.jpg",
 "username":"星星"
    },
    {
 "id":"15",
 "imgSrc": "img/2.jpg",
 "username":"星星"
    },
    {
 "id":"16",
 "imgSrc": "img/3.jpg",
 "username":"星星"
    },
    {
 "id":"17",
 "imgSrc": "img/4.jpg",
 "username":"星星"
    },
    {
 "id":"18",
 "imgSrc": "img/5.jpg",
 "username":"星星."
    },
    {
 "id":"19",
 "imgSrc": "img/6.jpg",
 "username":"星星."
    },
    {
 "id":"20",
 "imgSrc": "img/7.jpg",
 "username":"星星"
    },
    {
 "id":"21",
 "imgSrc": "img/8.jpg",
 "username":"星星"
    },
    {
 "id":"22",
 "imgSrc": "img/9.jpg",
 "username":"星星"
    },
    {
 "id":"23",
 "imgSrc": "img/10.jpg",
 "username":"星星"
    },
    {
 "id":"24",
 "imgSrc": "img/11.jpg",
 "username":"星星 -"
    }
]

做法其实很简单，主要利用 Swiper 就能很快实现，感兴趣的可以去尝试一下，有问题的直接私信我就行，谢谢 ~

Swiper实现图片预览效果

JavaScript相关栏目本月热门文章