jQuery图像幻灯片插件-插件特效-星河码客

真的很简单!首先,你必须将图像插入到html作为你通常会做什么。完成这一步后,您必须添加一个数据属性- data-slideshow并设置其值的路径的一系列图像:剩下的,就是我们的插件包含在您的页面,调用它的幻灯片()方法和你的幻灯片很好!这个文件是普通jQuery插件。首先我们需要定义默认选项。options = $.extend({ timeOut: 3000, // how long each slide stays on screen showNavigation: true, // show previous/next arrows pauseOnHover: true, // pause when hovering with the mouse swipeNavigation: true // (basic) support for swipe gestures}, options)基本的想法是,我们采取某种形象的来源从data-slideshow属性,并将它们插入到一个div作为它的背景。这个div原始图片的尺寸和后收集的所有图像幻灯片(包括一个我们开始)取代它。让我们来看看代码使其更清晰一点。// Variablesvar intervals = [], slideshowImgs = [], originalSrc, img, cont, width, height,// Creates an object with all the elements with a 'data-slideshow' attributecontainer = this.filter(function () { return $(this).data('slideshow');});// Cycle through all the elements from the container object// Later on we'll use the "i" variable to distinguish the separate slideshows from one anotherfor (var i = 0; i < container.length; i++) { cont = $(container[i]); width = container.eq(i).outerWidth(true); height = container.eq(i).outerHeight(true); // For every separate slideshow, a helper

, each with its own ID. // In those we'll store the images for our slides. var helpdiv = $('

'); helpdiv.height(height); helpdiv.width(width); // If this option is enabled, call a function that appends buttons if (options.showNavigation) { Navigation(); } // Append the original image to the helper

originalSrc = cont.attr('src'); img = $('

'); img.appendTo(helpdiv); // Append the images from the data-slideshow attribute slideshowImgs[i] = cont.attr('data-slideshow').split("|"); for (var j = 0; j < slideshowImgs[i].length; j++) { img = $('

'); img.appendTo(helpdiv); } // Replace the original element with the helper

cont.replaceWith(helpdiv); // Activate the slideshow automaticSlide(i)}　在激活后开始淡入和淡出的图像自动。　　我们也可以根据设置控制幻灯片通过点击和徘徊。　　由于hammer.js 我们通过图片。　　　　让我们看看移动幻灯片的功能!// Slideshow auto switchfunction automaticSlide(index) { // Hide all the images except the first one $('#slideshow-container-' + index + ' .slide:gt(0)').hide(); // Every few seconds fade out the first image, fade in the next one, // then take the first and append it to the container again, so it becomes last intervals[index] = setInterval(function () { $('#slideshow-container-' + index + ' .slide:first').fadeOut("slow") .next('.slide').fadeIn("slow") .end().appendTo('#slideshow-container-' + index + ''); }, options.timeOut);}// Pause on hover and resume on mouse leaveif (options.pauseOnHover) { (function hoverPause() { $('.slideshow').on({ 'mouseenter.hover': function () { clearInterval(intervals[($(this).attr('id').split('-')[2])]) }, 'mouseleave.hover': function () { automaticSlide($(this).attr('id').split('-')[2]) } }); })()}// We use this to prevent the slideshow from resuming once we've stopped itfunction hoverStop(id) { $('#' + id + '').off('mouseenter.hover mouseleave.hover');}// Create the navigation buttonsfunction Navigation() { // The buttons themselves var leftArrow = $('