swiper 大图预览
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no minimal-ui">
<meta charset="UTF-8">
<title>Document</title>
<link href="https://cdn.bootcss.com/Swiper/3.4.2/css/swiper.min.css" rel="stylesheet">
<style>
.showBigImg {
display: none;
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,.6);
z-index: 999;
}
.showBigImg .closeBigImg {
position: absolute;
right: 35px;
top: 35px;
width: 50px;
height: 50px;
border-radius: 50%;
background: #000;
text-align: center;
line-height: 45px;
font-size: 45px;
color: #fff;
z-index: 9999;
user-select: none;
}
.showBigImg .showBigImgWrap {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
}
.showBigImg .showBigImgWrap .allImgBox {
position: relative;
width: 100%;
height: 100%;
}
.showBigImg .showBigImgWrap .allImgBox .imgIte {
float: left;
width: 100%;
height: 100%;
text-align: center;
}
.showBigImg .showBigImgWrap .allImgBox .imgIte span {
display: inline-block;
width: 0;
height: 100%;
vertical-align: middle;
}
.showBigImg .showBigImgWrap .allImgBox .imgIte img {
max-width: 90%;
max-height: 90%;
vertical-align: middle;
}
.small-img img{
width: 150px;
}
</style>
</head>
<body>
<div class="small-img">
<img src="//cdn.attach.qdfuns.com/notes/pics/201710/13/093715yf2jt47tttj9lyfj.jpg" alt="">
<img src="//cdn.attach.qdfuns.com/notes/pics/201710/13/092835ebbkfzjtb4okwj2b.jpg" alt="">
<img src="//cdn.attach.qdfuns.com/notes/pics/201710/13/092835beqzk6kyjkbwr5bw.jpg" alt="">
<img src="//cdn.attach.qdfuns.com/notes/pics/201710/13/092835nshkii0i2k0dsikn.jpg" alt="">
<img src="//cdn.attach.qdfuns.com/notes/pics/201710/13/093653k6ztcd7x7czebkfh.jpg" alt="">
</div>
<div class="showBigImg">
<div class="closeBigImg">
×
</div>
<div class="showBigImgWrap swiper-container">
<div class="allImgBox swiper-wrapper">
<div class="imgIte swiper-slide">
<span></span><img src="img/slide1.png" alt="">
</div>
</div>
<a href="javascript:;" class="swiper-button-prev"></a>
<a href="javascript:;" class="swiper-button-next"></a>
</div>
</div>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/Swiper/3.4.2/js/swiper.min.js"></script>
<script>
var myswiper = new Swiper('.showBigImgWrap',{
prevButton:'.swiper-button-prev',
nextButton:'.swiper-button-next'
});
var outwrap = $('.showBigImg');
var close = $('.closeBigImg');
var box = $('.allImgBox');
close.click(function () {
outwrap.fadeOut();
});
//BigImg代码生成
function BigImgSlide(srcArr,posi){
outwrap.fadeIn();
var str = '';
for(var i=0; i<srcArr.length; i++){
str += '<div class="imgIte swiper-slide"><span></span><img src="'+ srcArr[i]+'" alt=""></div>';
}
box.html(str);
var imgIte = $('.imgIte');
imgIte.css({
width: window.innerWidth,
height: window.innerHeight
});
myswiper.update();
myswiper.slideTo(posi, 0);
}
//图片点击
$(function () {
var img = $('.small-img img');
img.click(function () {
var arr = [];
img.each(function () {
arr.push($(this).attr('src'));
});
BigImgSlide(arr, img.index(this));
});
});
</script>
</body>
</html>
进群领取相关资料598399936
进群领取相关资料598399936
