跳至内容
梅竹生辉
用户工具
登录
站点工具
搜索
工具
显示页面
修订记录
反向链接
最近更改
媒体管理器
网站地图
登录
>
最近更改
媒体管理器
网站地图
您的足迹:
swipergallery
本页面只读。您可以查看源文件,但不能更改它。如果您觉得这是系统错误,请联系管理员。
====== Swiper相册 ====== ===== html部分 ===== <div class="thumb" thumblist="list1"> <img src="uploads/s1_1.jpg"> <img src="uploads/s1_2.jpg"> <img src="uploads/s1_3.jpg"> <img src="uploads/s1_4.jpg"> </div> <div class="swiper-container" id="origin-img"> <div class="swiper-wrapper"></div> <div class="swiper-pagination"></div> <div class="upload">xxx上传于2018-06-17</div> </div> ===== CSS部分 ===== #origin-img { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #000; } #origin-img .swiper-slide img { width: 100%; vertical-align: middle; } #origin-img .swiper-pagination { top: 1em; bottom: auto; color: #fff; } #origin-img .upload { position: absolute; bottom: 0; line-height: 3em; background: rgba(0, 0, 0, .5); z-index: 5; color: #fff; text-indent: 1em; width: 100%; } ===== JS部分 ===== var imgsdata = { "list1": ["b1_1.jpg", "b1_2.jpg", "b1_3.jpg", "b1_4.jpg", "b1_5.jpg", "b1_6.jpg", "b1_7.jpg", "b1_8.jpg", "b1_9.jpg"], "list2": ["b2_1.jpg", "b2_2.jpg"], "list3": ["b3_1.jpg"], } var swiper = new Swiper('.swiper-container', { zoom: true, width: window.innerWidth, virtual: true, spaceBetween: 20, pagination: { el: '.swiper-pagination', type: 'fraction', }, on: { click: function() { $('#origin-img').fadeOut('fast'); this.virtual.slides.length = 0; this.virtual.cache = []; swiperStatus = false; }, }, }); $('.thumb img').click(function() { clickIndex = $(this).index(); imglist = $(this).parent().attr('thumblist'); imgs = imgsdata[imglist]; for (i = 0; i < imgs.length; i++) { swiper.virtual.appendSlide('<div class="swiper-zoom-container"><img src="uploads/' + imgs[i] + '" /></div>'); } swiper.slideTo(clickIndex); $('#origin-img').fadeIn('fast'); swiperStatus = true; }) //切换图状态禁止页面缩放 document.addEventListener('touchstart', function(event) { if (event.touches.length > 1 && swiperStatus) { event.preventDefault(); } }) var lastTouchEnd = 0; document.addEventListener('touchend', function(event) { var now = (new Date()).getTime(); if (now - lastTouchEnd <= 300) { event.preventDefault(); } lastTouchEnd = now; }, false) document.addEventListener('touchmove', function(e) { if (swiperStatus) { e.preventDefault(); } })
swipergallery.txt
· 最后更改: 2021/12/23 17:19 (外部编辑)
页面工具
显示页面
修订记录
反向链接
回到顶部