多张图查看大图

1.样式

<!--引入swiper的css-->
<link rel="stylesheet" href="swiper/swiper.css">
<style type="text/css">
	/*媒体判断HTML里的font-size*/
	html { font-size: 40px; } @media screen and (min-width: 320px) { html { font-size: 17.064px; } } @media screen and (min-width: 360px) { html { font-size: 19.2px; } } @media screen and (min-width: 375px) { html { font-size: 20px; } } @media screen and (min-width: 384px) { html { font-size: 20.48px; } } @media screen and (min-width: 400px) { html { font-size: 21.376px; } } @media screen and (min-width: 414px) { html { font-size: 22.08px; } } @media screen and (min-width: 424px) { html { font-size: 22.616px; } } @media screen and (min-width: 480px) { html { font-size: 25.6px; } } @media screen and (min-width: 540px) { html { font-size: 28.8px; } } @media screen and (min-width: 720px) { html { font-size: 38.4px; } } @media screen and (min-width: 750px) { html { font-size: 40px; } }			
	/*大图样式*/
	.pirctureList{
		display: -webkit-box;
	    display: -moz-box;
	    display: -ms-flexbox;
	    display: -webkit-flex;
	    display: flex;
	    display: box;
	    flex-wrap: wrap;
	}
	.pirctureList img{
	    background: #E9E9E9;
	    margin-right: 0.25rem;
	    margin-top: 0.25rem;
	    width: 5.6rem;
	    height: 5.6rem;
	}
	.pirctureList img.nob {
	    margin-right: 0;
	}
	
	
	/*大图的样式*/
	.bigPic__contain{
		position: fixed;
		width: 100%;
		height: 100%;
		background-color: #000;
		top: 0;
		left: 0;
	}
	.bigPic__contain_wrap{
		position:relative;
		top: 50%;
	}
	.swiper-container-bigPic{
		position: relative;
		left: 0;
		top: 0;
		width: 100%;
	}
	.swiper-container-bigPic .swiper-slide{
		width: 100%;
		text-align: center;
	}
	
	.swiper-container-bigPic .swiper-slide img{
		max-width: 100%;
		vertical-align:middle;
	}
	.bigPic__contain_close{
		width: 1rem;
		height: 1rem;
		line-height: 1rem;
		text-align: center;
		position: absolute;
		right: 0.3rem;
		top: 0;
		color: #fff;
		border-radius: 100%;
		-moz-border-radius: 100%;
		-webkit-border-radius: 100%;
		border: 0.05rem solid #fff;
		background-color: rgba(0,0,0,0.5);
		z-index: 5;
	}
	
</style>

2.HTML部分

<!--需要自己换图片地址-->
<div class="pirctureList flex">
	<img src="xxx.jpg" alt="">
	<img src="xxx.png" alt="">
	<img class="nob" src="xxx.png" alt="">
	<img src="xxx.jpg" alt="">
	<img src="xxx.jpg" alt="">
	<img class="nob" src="xxx.jpg" alt="">
</div>
<!--查看大图-->
<div class="bigPic__contain" style="display: none;">
	<div class="bigPic__contain_wrap">
		<div class="bigPic__contain_close">×</div>
		<div class="swiper-container swiper-container-bigPic swiper-container-horizontal">
			
		    <div class="swiper-wrapper"></div>
		    <!-- 如果需要分页器 -->
		    <div class="swiper-pagination"></div>
		    
		    <!-- 如果需要导航按钮 -->
		    <div class="swiper-button-prev"></div>
		    <div class="swiper-button-next"></div>
		    
		</div>
	</div>
</div>

3.js

<!--引入jq-->
<script src="https://code.jquery.com/jquery-3.1.1.min.js" type="text/javascript" charset="utf-8"></script>
<!--引入swiper的js-->
<script src="swiper/swiper.js"></script>
<script type="text/javascript">
	//点击查看大图detail-content
	$(".pirctureList img").on("click", function() {
		var activeInde=$(this).index();
		$(".bigPic__contain").css("display","block");
						
		var str='';
		for(var i=0;i<$(".pirctureList img").length;i++){
//				console.log($(".pirctureList img")[i].src)
			str+='<div class="swiper-slide">'+
		        '<img src="'+$(".pirctureList img")[i].src+'" alt="" class="bigPic" />'+
		    	'</div>'
		}
		
		$(".bigPic__contain .swiper-wrapper").html(str);
		
		var mySwiper = new Swiper('.swiper-container', {
			loop: true,
			// 如果需要前进后退按钮
			nextButton: '.swiper-button-next',
			prevButton: '.swiper-button-prev',
			//当前第几张图片
			initialSlide: activeInde,
		});
		
		$(".bigPic__contain_wrap").css({"margin-top":-$(".bigPic__contain_wrap").height()/2+"px"});
		$(".swiper-container-bigPic .swiper-slide").css({"height":$(".swiper-container-bigPic").height()+"px","line-height":$(".swiper-container-bigPic").height()+"px"})
		
		$(".bigPic__contain_close").on("click",function(){
			$(".bigPic__contain").css("display","none");
		});
	});
</script>

4.几点说明:
  (1)需要下载swiper资源("swiper.css"和"swiper.js"): http://www.swiper.com.cn/download/index.html
  (2)图片路径需自己填充