jQuery实现朋友圈查看图片 - JavaScript

jQuery实现朋友圈查看图片效果，供大家参考，具体内容如下

效果： 图片点击显示大图，多张图可以滑动，左右按钮点击可切换查看图片 （左右点击切换效果不需要删除样式即可）

左右切换按钮图片 arrows.png（不需要可删除）

touchTouch.jquery.js 文件

(function(){ /* Private variables */ var overlay = $('<div id="galleryOverlay">'), slider = $('<div id="gallerySlider">'), prevArrow = $('<a id="prevArrow"></a>'), nextArrow = $('<a id="nextArrow"></a>'), pageSpan = $('<span id="pagelimit"></span'), overlayVisible = false;  /* Creating the plugin */ $.fn.touchTouch = function(){ var placeholders = $([]), pl1=[], index = 0, items = this;  // Appending the markup to the page overlay.hide().appendTo('body'); slider.appendTo(overlay); pageSpan.appendTo(overlay);  // Creating a placeholder for each image items.each(function(){ placeholders = placeholders.add($('<div class="placeholder">')); });  // Hide the gallery if the background is touched / clicked slider.append(placeholders).on('click',function(e){ hideOverlay();  });  // Listen for touch events on the body and check if they // originated in #gallerySlider img - the images in the slider. $('body').on('touchstart', '#gallerySlider img', function(e){ var touch = e.originalEvent, startX = touch.changedTouches[0].pageX; slider.on('touchmove',function(e){ e.preventDefault(); touch = e.originalEvent.touches[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(){ slider.off('touchmove'); });  // Listening for clicks on the thumbnails  //评论事件  items.on('click', function(e){ e.preventDefault(); // Find the position of this image // in the collection  index = items.index(this); showOverlay(index); showImage(index);  calcPages(items,index); // Preload the next image preload(index+1);  // Preload the previous preload(index-1); $(document).data("overlayVisible",true); e.cancelBubble = true; //取消冒泡事件 //e.stopPropagation();   });    function calcPages(items,index){ pageSpan.text((index+1)+"/"+items.length); } // 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(); }); }  // Listen for arrow keys $(window).bind('keydown', function(e){ if (e.keyCode == 37){ showPrevious(); } else if (e.keyCode==39){ showNext(); } });   /* Private functions */   function showOverlay(index){ // If the overlay is already shown, exit if (overlayVisible){ return false; }  // Show the overlay overlay.show();  setTimeout(function(){ // Trigger the opacity CSS transition overlay.addClass('visible'); }, 100);  // Move the slider to the correct image offsetSlider(index);  // Raise the visible flag overlayVisible = true; }  function hideOverlay(){ // If the overlay is not shown, exit  if(!overlayVisible){ return false; }  // Hide the overlay overlay.hide().removeClass('visible'); overlayVisible = false; $(document).data("overlayVisible",overlayVisible); }  function offsetSlider(index){ // This will trigger a smooth css transition slider.css('left',(-index*100)+'%'); }  // Preload an image by its index in the items array function preload(index){ setTimeout(function(){ showImage(index); }, 1000); }  // Show image in the slider function showImage(index){  // If the index is outside the bonds of the array if(index < 0 || index >= items.length){ return false; }  // Call the load function with the href attribute of the item loadImage(items.eq(index).attr('href'), function(){ placeholders.eq(index).html(this); }); }  // Load the image and execute a callback function. // Returns a jQuery object  function loadImage(src, callback){ var img = $('<img>').on('load', function(){ callback.call(img); }); img.attr('src',src); }  function showNext(){  // If this is not the last image if(index+1 < items.length){ index++; offsetSlider(index); preload(index+1); calcPages(items,index); } else{ // Trigger the spring animation  slider.addClass('rightSpring'); setTimeout(function(){ slider.removeClass('rightSpring'); },500); } }  function showPrevious(){  // If this is not the first image if(index>0){ index--; offsetSlider(index); preload(index-1); calcPages(items,index); } else{ // Trigger the spring animation slider.addClass('leftSpring'); setTimeout(function(){ slider.removeClass('leftSpring'); },500); } } };})(jQuery);

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持来客网。