简单的jQuery幻灯片图片轮播插件

下载地址

真的很简单!首先,你必须将图像插入到html。完成这一步后,您必须添加一个数据属性- data-slideshow并设置其值的路径的一系列图像:剩下的,就是我们的插件引用在您的页面,调用它的slideShow()方法和你的幻灯片!插件包括一个JavaScript文件和一个CSS。我们将开始js文件!assets/jQuery-slideshow-plugin/plugin.js这个文件是普通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)}在激活后开始淡入和淡出的图像自动。我们也可以根据设置控制幻灯片通过点击和徘徊。初始化插件使用这段代码,随意更改设置的值。(function ($) {$("#activate").on("click", function () { $("img").slideShow({ timeOut: 2000, showNavigation: true, pauseOnHover: true, swipeNavigation: true });}(jQuery));

dd: