Question

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

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);
    });
}

只需给主要元素一个公共类，并按如下方式使用：

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

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

的 DEMO

Answer 2

为什么不为此编写插件？

(function ($) {

    var easySliderFunc=function(options,elem){
        var setting=$.extend({
            delay=5000,
            transition=100
        },options);

        var container    = $(elem),
            listItems           = container.children('li'),
            listLen             = listItems.length,
            i                   = 0,

        changeList = function () {

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

        };

        listItems.not(':first').hide();
        setInterval(changeList, setting.delay);
    };
    $.fn.easySlider=function(options){
        return $(this).each(function(){
            easySlider(options,this);
        });
    }
}(jQuery));

然后您可以轻松地将其称为：

$("#exampleSlider").easySlider({
    transition:100, //it can be any number
    delay: 5000     //it can be any number
});

jquery简单图片幻灯片，可在网站上播放多个幻灯片

2 个答案: