分享一个点击小图后可放大滑动轮播的swiper效果js代码
<!DOCTYPEhtml><html><head><metaname="viewport"content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=nominimal-ui"><metacharset="UTF-8"><title>手机端查看
admin
<!DOCTYPE html>
<html>
<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>手机端查看大图</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>
<img src="http://tp.jxmlove.top/hvfox-user.png" alt="">
<img src="http://src-php.oss-cn-beijing.aliyuncs.com/upload/images/u%3D3232217647%2C1327495693%26fm%3D26%26gp%3D0.jpg" alt="">
<img src="http://tp.jxmlove.top/hvfox-user.png" alt="">
<img src="http://tp.jxmlove.top/hvfox-user.png" alt="">
<img src="http://src-php.oss-cn-beijing.aliyuncs.com/upload/images/u%3D3232217647%2C1327495693%26fm%3D26%26gp%3D0.jpg" alt="">
<img src="http://tp.jxmlove.top/hvfox-user.png" alt="">
</div>
<div>
<div>
×
</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:;"></a>
<a href="javascript:;"></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>
