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

真的很简单!首先,你必须将图像插入到html。完成这一步后,您必须添加一个数据属性- data-slideshow并设置其值的路径的一系列图像:
<img src="...." data-slideshow="img1.jpg|img2.jpg|img3.jpg" />
剩下的,就是我们的插件引用在您的页面,调用它的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原始图片的尺寸和后收集的所有图像幻灯片(包括我们开始一个)取代它。让我们来看看代码使其更清晰一点。
// Variables
var intervals = [],
    slideshowImgs = [],
    originalSrc,
    img,
    cont,
    width,
    height,

// Creates an object with all the elements with a 'data-slideshow' attribute

container = 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 another

for (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 <div>, each with its own ID.
    // In those we'll store the images for our slides.

    var helpdiv = $('<div id="slideshow-container-' + i + '" class="slideshow" >');

    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 <div>

    originalSrc = cont.attr('src');
    img = $('<div class="slide" style="background-image: url(' + originalSrc + ')">');
    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 = $('<div class="slide" style="background-image: url(' + slideshowImgs[i][j] + ')">');
        img.appendTo(helpdiv);

    }

    // Replace the original element with the helper <div>

    cont.replaceWith(helpdiv);

    // Activate the slideshow

    automaticSlide(i)

}
在激活后开始淡入和淡出的图像自动。
我们也可以根据设置控制幻灯片通过点击和徘徊。

初始化插件使用这段代码,随意更改设置的值。
(function ($) {
$('#activate').on('click', function () {
    $('img').slideShow({
        timeOut: 2000,
        showNavigation: true,
        pauseOnHover: true,
        swipeNavigation: true
    });
}(jQuery));