H5缩略图全屏放⼤并左右滑动实现（适配H5和PC）最近做H5遇到⼀个任务：点击页⾯缩略图全屏放⼤，并要⽀持左右滑动切换⼤图。这⾥特地记录⼀下：
先看⾼清⽆码效果图：
⾸先，创建缩略图容器：
<div id="thumbs">
<a href="img/1.jpg" title="风景⼀"></a>
<a href="img/2.jpg" title="风景⼆"></a>
<a href="img/3.jpg" title="风景三"></a>
<a href="img/4.jpg" title="风景四"></a>
<a href="img/5.jpg" title="风景五"></a>
<a href="img/6.jpg" title="风景六"></a>
<a href="img/7.jpg" title="风景七"></a>
<a href="img/8.jpg" title="风景⼋"></a>
<a href="img/9.jpg" title="风景九"></a>
</div>
之后，⽤户点击某张缩略图时触发JS动态创建全屏弹层，并⾃动加载相邻前⼀张后⼀张⼤图：
<('click', function(e){
e.preventDefault();
// Find the position of this image
// in the collection
index = items.index(this);
showOverlay(index);
showImage(index);
/
/ Preload the next image
preload(index+1);
// Preload the previous
preload(index-1);
});
接下来实现左右滑动切换：
// Listen for touch events on the body and check if they
// originated in #gallerySlider img - the images in the slider.
var startX;// original position
$('body').on('touchstart', '#gallerySlider img', function(e){
h5平台源码下载var touch = e.originalEvent;
startX = touch.changedTouches[0].pageX;
<('touchmove',function(e){
e.preventDefault();
touch = uches[0] || e.originalEvent.changedTouches[0];
if(touch.pageX - startX > 10){
slider.off('touchmove');
showPrevious();
}
else if (touch.pageX - startX < -10){
slider.off('touchmove');
showNext();
}
});
// Return false to prevent image
// highlighting on Android
return false;
}).on('touchend',function(e){
slider.off('touchmove');
// Hide the gallery if the images is touched / clicked, but not slide
touch = uches[0] || e.originalEvent.changedTouches[0];
if(touch.pageX - startX == 0){
hideOverlay();
}
});
为了适配PC⽹页，可以检测下当前设备⽀持滑动与否，否的话，弹层⼤图左右加⼊切换按钮，⾥⾯变轮播图效果：
// If the browser does not have support
// for touch, display the arrows
if ( !("ontouchstart" in window) ){
overlay.append(prevArrow).append(nextArrow);
prevArrow.click(function(e){
e.preventDefault();
showPrevious();
});
nextArrow.click(function(e){
e.preventDefault();
showNext();
});
$('body').on('click', '#gallerySlider img', function(e){
e.preventDefault();
hideOverlay();
});
}
有时候图⽚数量多的话，查看⼤图还需要页码或者底部显⽰缩略图：// Show index in the overlay page
if(showIndex){
photoNum.appendTo(overlay);
setSumPhotoNum(items);
}
// Add thumbholders to the overlay page
if(showThumbs){
photoThumbs.find('ul').append(thumbholders);
photoThumbs.find('li').on('click',function(e){
e.preventDefault();
index = thumbholders.index(this);
jumpTo(index);
});
photoThumbs.appendTo(overlay);
}
OK，以上是⼤致的功能点实现，具体细节见源码。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。