js photoswipe实例手机端图片幻灯片展示特效代码下载


js photoswipe实例手机端图片幻灯片展示特效代码下载
js photoswipe实例手机端图片幻灯片展示特效代码下载以及手机端图片、幻灯片展示等js/jquery网页特效代码下载。

1. 引入CSS

<link rel="stylesheet" href="css/photoswipe.css">
<link rel="stylesheet" href="css/default-skin/default-skin.css">

2. 引入JS

<script src="js/photoswipe.min.js"></script>
<script src="js/photoswipe-ui-default.min.js"></script>

3. HTML代码

<div id="main">
	<p class="pnav"><a href="index.html" class="cur">图集模式</a> <a href="index2.html">列表模式</a></p>
	<div class="demo">
		<p style="font-size:16px; margin:20px auto">请点击图片观看大图</p>
		<div id="photos">
			<img src="images/s1_m.jpg" alt="Image description" />
			<p>图集</p>
		</div>
		<div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">
			<div class="pswp__bg"></div>
				<div class="pswp__scroll-wrap">
					<div class="pswp__container">
						<div class="pswp__item"></div>
						<div class="pswp__item"></div>
						<div class="pswp__item"></div>
					</div>
					<div class="pswp__ui pswp__ui--hidden">
						<div class="pswp__top-bar">
							<div class="pswp__counter"></div>
							<button class="pswp__button pswp__button--close" title="Close (Esc)"></button>
							<button class="pswp__button pswp__button--share" title="Share"></button>
							<button class="pswp__button pswp__button--fs" title="Toggle fullscreen"></button>
							<button class="pswp__button pswp__button--zoom" title="Zoom in/out"></button>
							<div class="pswp__preloader">
								<div class="pswp__preloader__icn">
									<div class="pswp__preloader__cut">
										<div class="pswp__preloader__donut"></div>
									</div>
								</div>
							</div>
						</div>
						<div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
							<div class="pswp__share-tooltip"></div> 
						</div>
						<button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)"></button>
						<button class="pswp__button pswp__button--arrow--right" title="Next (arrow right)"></button>
						<div class="pswp__caption">
							<div class="pswp__caption__center"></div>
						</div>
					</div>
				</div>
			</div>
		</div>
</div>
<script type="text/javascript">
var openPhotoSwipe = function() {
    var pswpElement = document.querySelectorAll('.pswp')[0];
    var items = [
        {
            src: 'images/s1.jpg',
            w: 800,
            h: 1142
        },
        {
            src: 'images/s2.jpg',
            w: 800,
            h: 1142
        },
		{
            src: 'images/s3.jpg',
            w: 800,
            h: 1142
        },
		{
            src: 'images/s4.jpg',
            w: 800,
            h: 1142
        },
		{
            src: 'images/s5.jpg',
            w: 800,
            h: 1142
        }
    ];
    var options = {
        history: false,
        focus: false,
        showAnimationDuration: 0,
        hideAnimationDuration: 0
    };
    var gallery = new PhotoSwipe( pswpElement, PhotoSwipeUI_Default, items, options);
    gallery.init();
};
document.getElementById('photos').onclick = openPhotoSwipe;
</script>

相关推荐

发表评论

相关文章