正文
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:;
padding:;
}
.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:;
bottom:;
left:;
right:;
z-index:;
margin: auto;
background-color: rgba(0, 0, 0, 0.7);
}
.items {
width: 100% !important;
height: 100% !important;
}
.motai img {
position: absolute;
top:;
bottom:;
left:;
right:;
margin: auto;
max-width: 100%;/*图片按原尺寸显示*/
max-height: 100%;/*图片按原尺寸显示*/
z-index:;
}
.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' //分页器类型
})
