HTML5中swiper实现图片查看功能

swiper实现图片查看功能

分享一个swiper实现的图片查看功能，支持图片点击放大、轮播、关闭等功能。先看一下效果图

以下是核心代码
function(){
var img_index = $("#article img").index(this);//点击了第几张图
//首次点击引入js，向文档添加元素并初始化swiper
if(true){
var swiper_slider = ‘’;
$.getScript("./js/swiper.js",function(){ //加载swiper.js,成功后，并执行回调函数
var swiper_container = $(’

’);
var swiper_wrapper = $(’

’);
var swiper_icon = ‘

’;
KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲article img").e…(this).attr(“original”)+’">’;//由于使用了lazyload,真正的src在original里
swiper_slider += ‘

<img src="’+$(this).attr(“src”)+’">

’;//由于使用了lazyload,真正的src在original里
});
var btn = KaTeX parse error: Expected 'EOF', got '#' at position 100: …dex:9999;color:#̲fff;text-align:…(’.swiper-container’).hide();">×’);//设置关闭按钮，并绑定事件
swiper_wrapper.append(swiper_slider);
swiper_container.append(swiper_wrapper);
swiper_container.append(swiper_icon);
swiper_container.append(btn);
$(“body”).append(swiper_container);
swiper = new Swiper(’.swiper-container’, {
zoom: true,
initialSlide:img_index,//初始显示第几张
pagination: {
el: ‘.swiper-pagination’,
},
});
});

demo下载链接：https://download.csdn.net/download/demonboy001/10864827