注意:需要在微信中打开,请引入https://res.wx.qq.com/open/js/jweixin-1.3.2.js,文件
效果网址:http://yj.surenjiangyong.cn/imagePreview.html (请在微信中打开)
<style type="text/css"> *{margin: 0;padding:0;} .img_div img{width: 100%;display: block;} </style>
html:
<div class="img_div"> <img src="http://panpan.yunmell.wang/attachment/images/2/2019/10/UDYygid8lgdcD9CclcZ0ZzDG8nXuYb.jpg"> <img src="http://panpan.yunmell.wang/attachment/images/2/2019/10/kHSZHrxrhSUkX3Qr8Zz5SrzRzZHh0f.jpg"> <img src="http://panpan.yunmell.wang/attachment/images/2/2019/10/e8Jq8yKHFw4FwYY8Jp4jPhuC2k8u41.jpg"> <img src="http://panpan.yunmell.wang/attachment/images/2/2019/10/doyuSUmCK9MOkuKtcf1E1uKtCTs5ut.jpg"> <img src="http://panpan.yunmell.wang/attachment/images/2/2019/10/E0RzrV4QW1000Z4ttr3q0h8ndCoR0w.jpg"> </div>
js:
<script src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script> <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> <script type="text/javascript"> $(".img_div img").click(function(){ var obj=$(".img_div img"); var urlsarr=[]; var src=$(this).attr('src'); var index=$(this).index(); for(var i=0;i<obj.length;i++){ urlsarr.push(obj.eq(i).attr('src')); } WeixinJSBridge.invoke('imagePreview', { current: urlsarr[index],//当前显示图片 urls: urlsarr,//图片路径数组形式 }) }); </script>