真的很简单!首先,你必须将图像插入到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));
![简单的jQuery幻灯片图片轮播插件]()
在线演示
积分下载
6毛下载
砍两刀下载
文件目录······
未经允许不得转载：
ICode联盟 »
插件特效 »
简单的jQuery幻灯片图片轮播插件