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 = $("

"); var rightArrow = $("

"); // Arrows for the buttons var nextPointer = $(""); var prevPointer = $(""); prevPointer.appendTo(leftArrow); nextPointer.appendTo(rightArrow); leftArrow.appendTo(helpdiv); rightArrow.appendTo(helpdiv);}// Slideshow manual switchif (options.showNavigation) {// This shows the navigation when the mouse enters the slideshow// and hides it again when it leaves it $(".slideshow").on({ "mouseenter": function () { $(this).find(".leftBtn, .rightBtn").removeClass("hide") }, "mouseleave": function () { $(this).find(".leftBtn, .rightBtn").addClass("hide") } }); // Upon click, stop the automatic slideshow and change the slide $(".leftBtn").on("click", function () { // Clear the corresponding interval to stop the slideshow // ( intervals is an array, so we give it the number of the slideshow container) clearInterval(intervals[($(this).parent().attr("id").split("-")[2])]); // Make the last slide visible and set it as first in the slideshow container $(this).parent().find(".slide:last").fadeIn("slow") .insertBefore($(this).parent().find(".slide:first").fadeOut("slow")); hoverStop($(this).parent().attr("id")); }); $(".rightBtn").on("click", function () { // Clear the corresponding interval to stop the slideshow clearInterval(intervals[($(this).parent().attr("id").split("-")[2])]); // Fade out the current image and append it to the parent, making it last // Fade in the next one $(this).parent().find(".slide:first").fadeOut("slow") .next(".slide").fadeIn("slow") .end().appendTo($(this).parent()); hoverStop($(this).parent().attr("id")); });}// Change slide on swipe// Same as the "on click" functions, but we use hammer.js this timeif (options.swipeNavigation) { $(".slideshow").hammer().on({ "swiperight": function () { clearInterval(intervals[($(this).attr("id").split("-")[2])]); $(this).find(".slide:last").fadeIn("slow") .insertBefore($(this).find(".slide:first").fadeOut("slow")) }, "swipeleft": function () { clearInterval(intervals[($(this).attr("id").split("-")[2])]); $(this).find(".slide:first").fadeOut("slow") .next(".slide").fadeIn("slow") .end().appendTo($(this)); } })}　最后,让我们来快速浏览一下的一些css。　　　　assets/jQuery-slideshow-plugin/plugin.css　　　　我们希望所有的图片幻灯片在另一个堆栈,所以我们给他们“滑动”。这也使他们适应整个幻灯片div。.sliding { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-position: center; background-size: cover;}然后我们设定一个z - index的10的按钮来将它们的图片。.slideBtn { position: absolute; z-index: 10; width: 50px; height: 100%; cursor: pointer;}.leftBtn { left: 0px; background: linear-gradient(to right, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0));}.rightBtn { right: 0px; background: linear-gradient(to left, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0));}最后,我们把css边框和三角形箭头放在一切之上的z - index 9001;.pointer { position: absolute; top: 50%; margin-top: -32px; z-index: 9001; left: 12px; opacity: 0.8;}.previous { width: 0; height: 0; border-top: 20px solid transparent; border-bottom: 20px solid transparent; border-right: 20px solid white;}.next { width: 0; height: 0; border-top: 20px solid transparent; border-bottom: 20px solid transparent; border-left: 20px solid white; right: 12px; left: auto;}使用插件(function ($) {$("#activate").on("click", function () { $("img").slideShow({ timeOut: 2000, showNavigation: true, pauseOnHover: true, swipeNavigation: true })

dd: