javascript - jquery 简单图像幻灯片，可在现场播放多个幻灯片

Question

这里的解决方案( https://stackoverflow.com/a/18493684/1969917 )我用来在网站上显示图像幻灯片。现在，客户希望在同一站点上播放另一个图像幻灯片，但这可行。我已经用另一个 id 尝试过并复制了 javascript。但第二个不行。只有第一个 slider 工作正常。

JS:

$(function () {

    /* SET PARAMETERS */
    var change_img_time     = 5000; 
    var transition_speed    = 100;

    var simple_slideshow    = $("#exampleSlider"),
        listItems           = simple_slideshow.children('li'),
        listLen             = listItems.length,
        i                   = 0,

    changeList = function () {

        listItems.eq(i).fadeOut(transition_speed, function () {
            i += 1;
            if (i === listLen) {
                i = 0;
            }
            listItems.eq(i).fadeIn(transition_speed);
        });

    };

    listItems.not(':first').hide();
    setInterval(changeList, change_img_time);

});

HTML:

<ul id="exampleSlider">
    <li><img src="http://placehold.it/500x250" alt="" /></li>
    <li><img src="http://placehold.it/500x250" alt="" /></li>
    <li><img src="http://placehold.it/500x250" alt="" /></li>
    <li><img src="http://placehold.it/500x250" alt="" /></li>
</ul>

我必须如何更改 JavaScript 代码才能在网站上处理多个幻灯片？

Answer 1

您可以将代码变成一个非常简单的 jQuery 插件，如下所示:

$.fn.simpleSlides = function () {

    /* SET PARAMETERS */
    var change_img_time = 1500;
    var transition_speed = 300;
    return this.each(function () {
        var simple_slideshow = $(this),
            listItems = simple_slideshow.children('li'),
            listLen = listItems.length,
            i = 0,
            changeList = function () {
                listItems.eq(i).fadeOut(transition_speed, function () {
                    i += 1;
                    if (i === listLen) {
                        i = 0;
                    }
                    listItems.eq(i).fadeIn(transition_speed);
                });
            };
        listItems.not(':first').hide();
        setInterval(changeList, change_img_time);
    });
}

只需给主要元素一个公共(public)类并按如下方式使用:

$(function(){
    $('.slideshow').simpleSlides()
});

插件中的each循环将隔离实例

DEMO