swiper 大图预览

来源：互联网发布：甜甜圈拷机软件下载编辑：程序博客网时间：2024/05/23 22:04

<!DOCTYPE html>

<head>

<title>Document</title>

<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>

</div>

</div>

</div>

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

阅读全文

0 0