<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no">
<meta name="format-detection" content="telephone=no"/>
<meta name="referrer" content="never">
<title></title>
<link rel="stylesheet" href="./css/common.css">
<link rel="stylesheet" href="./css/media.css">
<link rel="stylesheet" href="./css/style.css">
<script type="text/javascript" src="./js/jquery-1.11.0.min.js"></script>
</head>
<body style="background-color: #ffffff;">
<div class="health_title">
<span id="title">报告详情</span>
</div>
<div id="article" class="show_image_top clearfix">
<img src="./imgs/example.png" class="image_style fl">
<img src="./imgs/example.png" class="image_style fl" >
<img src="./imgs/example.png" class="image_style fl" >
</div>
<!--引入jquery-->
<script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/swiper.css"><!--先引入css，试过使用js引入是不行滴-->
<style>
.swiper-container {position: fixed;top:0;background: #000;width: 100%;height: 100%;opacity:0.7}
</style>
<script type="text/javascript">
var is_load_js = true;var swiper = {};
$("#article img").click(
function(){
var img_index = $("#article img").index(this);//点击了第几张图
var swiper_slider = '';
$.getScript("./js/swiper.js",function(){ //加载swiper.js,成功后，并执行回调函数
var swiper_container = $('<div class="swiper-container "></div>');
var swiper_wrapper = $('<div class="swiper-wrapper"></div>');
var swiper_icon = '<div class="swiper-pagination swiper-pagination-white"></div>';
$("#article img").each(function(){
//swiper_slider += '<div class="swiper-slide"><div class="swiper-zoom-container"><img src="'+$(this).attr("original")+'"></div></div>';//由于使用了lazyload,真正的src在original里
swiper_slider += '<div class="swiper-slide"><div class="swiper-zoom-container"><img src="'+$(this).attr("src")+'"></div></div>';//由于使用了lazyload,真正的src在original里
});
var btn = $('<div id="closs-btn" style="padding:10px;position:absolute;top:10px;right:10px;z-index:9999;color:#fff;text-align: center;line-height:12px;margin-top: 1rem;" onClick="$(\'.swiper-container\').hide();">×</div>');//设置关闭按钮，并绑定事件
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',
},
});
});
is_load_js = false;//表示已经初始化了swiper
}
);
$(".swiper-container").click(function () {
if(true){
$('.swiper-container').hide();
}
});
</script>
</body>
</html>
HTML5通过swiper实现图片预览
5星 · 超过95%的资源 需积分: 49 64 浏览量
2018-12-20
16:34:32
上传
评论 2
收藏 242KB RAR 举报 
swiperImage.rar （13个子文件） 
swiperImage js 
swiper.js 256KB jquery-1.11.0.min.js 94KB my.js 122B css common.css 191B style.css 947B media.css 49KB swiper.css 22KB
detail.html 3KB imgs 
example.png 157KB .idea encodings.xml 159B workspace.xml 20KB healthRecord.iml 458B inspectionProfiles modules.xml 276B资源评论
金#2019-06-24非常棒 找了很久的效果
