轮播放大图片photoswiper插件

<!doctype html>
<html lang="zh-cn">
<meta name="viewport" content="width=device-width, user-scalable=no">
<meta charset="UTF-8">
<head>
    <title>photoswiper插件</title>
</head>
<body>
    <div id="div1"></div>
<link href="../photoswipe/photoswipe.css" rel="stylesheet" />
<link href="../photoswipe/default-skin.css" rel="stylesheet" />
<script  src="../photoswipe/photoswipe.min.js"></script>
<script  src="../photoswipe/photoswipe-ui-default.min.js"></script>
<script>
	var items=[];
 /*此处为后台返回给你的图片地址*/
	var data=[{
			img:"https://office-cs-upload.hs350.com/default/20181206/093202.jpg"
		},
		{
			img:'https://office-cs-upload.hs350.com/default/20181015/171537.png'
		},
		{
			img:"https://office-cs-upload.hs350.com/default/20180926/115215.jpg"
		},{
			img:"https://office-cs-upload.hs350.com/default/20181016/174145.png"
		},{
			img:"https://office-cs-upload.hs350.com/video/picture/20181122/094301.png"
		}];
	var openPhotoSwipe = function(curentindex) {
		var pswpElement = document.querySelectorAll('.pswp')[0];
		var options = {
				history : false,
				focus : false,
				index : curentindex,
				showAnimationDuration : 0,
				hideAnimationDuration : 0
		};
		var gallery = new PhotoSwipe(pswpElement, PhotoSwipeUI_Default, items, options);
		gallery.init();
	};
//	openPhotoSwipe();
	document.getElementById('btn').onclick = function(){
		var imgcount=0;
		$.each(data, function(index,value) {
			items = [];
			var img = new Image();
			img.src = value.img;
			img.onload = function(event) {
				var nobj = {};
				imgcount++;
				nobj.src = data[index].img;
				nobj.h = event.currentTarget.height;
				nobj.w = event.currentTarget.width;
				items.push(nobj);
				if (imgcount == data.length) {
					var a = '<div id="gallery" class="pswp" tabindex="-1" role="dialog" aria-hidden="true"><div class="pswp__bg"/> <div class="pswp__scroll-wrap">  <div class="pswp__container"><div class="pswp__item"/><div class="pswp__item"/><div class="pswp__item"/>  </div>  <div class="pswp__ui pswp__ui--hidden"> <div class="pswp__top-bar"> <div class="pswp__counter" style="padding-top:10px;"/>   <button class="pswp__button pswp__button--close" title="Close (Esc)" style="margin-top:10px;"/>  <button class="pswp__button pswp__button--zoom" title="Zoom in/out"/>  <div class="pswp__preloader"> <div class="pswp__preloader__icn"> <div class="pswp__preloader__cut">  <div class="pswp__preloader__donut"/> </div> </div> </div> </div>   <div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap"> <div class="pswp__share-tooltip"/> </div>   <button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)"/>  <button class="pswp__button pswp__button--arrow--right" title="Next (arrow right)"/>   <div class="pswp__caption">  <div class="pswp__caption__center"/>  </div> </div>  </div>  </div> ';
					$("#div1").append($(a));
					openPhotoSwipe(0);
				}
			};
		});
	};
</script>
</body>
</html>
插件地址 http://photoswipe.com/documentation/getting-started.html
轮播放大图片photoswiper插件

猜你喜欢
