jQuery+swiper仿微信朋友圈图片放大查看预览代码,手机网页点击小图放大查看大图代码。
js代码
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/rem.js"></script>
<script type="text/javascript" src="js/swiper.min.js"></script>
<script>
$(document).ready(function(){
/*调起大图 S*/
var mySwiper = new Swiper('.swiper-container2', {
loop: false,
pagination: '.swiper-pagination2',
})
$("#list").on("click", ".post img",
function() {
var imgBox = $(this).parents(".post").find("img");
var i = $(imgBox).index(this);
$(".big_img .swiper-wrapper").html("")
for(var j = 0 ,c = imgBox.length; j < c ;j++){
$(".big_img .swiper-wrapper").append('<div class="swiper-slide"><div class="cell"><img src="' + imgBox.eq(j).attr("src") + '" / ></div></div>');
}
mySwiper.updateSlidesSize();
mySwiper.updatePagination();
$(".big_img").css({
"z-index": 1001,
"opacity": "1"
});
mySwiper.slideTo(i, 0, false);
return false;
});
$(".big_img").on("click",
function() {
$(this).css({
"z-index": "-1",
"opacity": "0"
});
});
});
/*调起大图 E*/
</script>
系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791
08-06 07:48不***火
回复
非常不错的功能