web端实现图片放大切换显示预览

项目中会遇到多张图片点击放大显示原图，并且能够左右滑动切换显示图片的需求，这种效果主要通过js来实现，下面我介绍的主要是借助swiper.js来实现这个完整的功能，

点击“查看协议” => 图片弹出显示，并且可以手动滑动预览，直接代码如下；

需要引入jQuery（或者Zepto）swiper.min.js + swiper.min.css

swiper.js下载地址：http://3.swiper.com.cn/download/index.html（实例代码使用的是swiper3）

 HTML：

<div class="swiperShow">查看协议</a></div >            
<div class="motai swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide items"><img src="img/a.jpg" alt="" /></div>
        <div class="swiper-slide items"><img src="img/c.jpg" alt="" /></div>
        <div class="swiper-slide items"><img src="img/d.jpg" alt="" /></div>
        <div class="swiper-slide items"><img src="img/e.jpg" alt="" /></div>        
    </div>
    <div class="swiper-pagination"></div>
</div>

CSS:

*{
    margin: 0;
    padding: 0;
}
.swiperShow{
    font-size: 0.6rem;
    text-align: center;
    background-color: #00D3AF;
    height: 1.5rem;
    line-height: 1.5rem;
    color: #fff;
}
            
.motai {
    display: none;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 11;
    margin: auto;
    background-color: rgba(0, 0, 0, 0.7);
}            
.items {
    width: 100% !important;
    height: 100% !important;
}            
.motai img {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    max-width: 100%;/*图片按原尺寸显示*/
    max-height: 100%;/*图片按原尺寸显示*/
    z-index: 99;
}            
.swiper-pagination {
    display: inline-block;
    height: 0.2rem;
    top: 0.5rem;
    font-size: 0.7rem;
    color: #999;
    text-align: center;
}

JS：

$('.swiperShow').click(function(){
    $('.motai').fadeIn();
});
$('.motai').click(function(){
    $(this).fadeOut();
});
var mySwiper = new Swiper('.swiper-container', {        
    slidesPerView:1, //默认初始显示页面    
    observer:true,//启动动态检查器,当改变swiper的样式（例如隐藏/显示）或者修改swiper的子元素时，自动初始化swiper                    
    touchRatio:0.5,//触摸比例。触摸距离与slide滑动距离的比率。默认为1
    pagination: ".swiper-pagination",//启动分页器
    paginationType : 'fraction'    //分页器类型                 
})