Javascript jquery简单图像幻灯片，用于在站点上播放多个幻灯片

这里的解决方案（）用于在站点上显示图像幻灯片。现在，客户希望在同一个站点上有另一个图像幻灯片，但这将起作用。我用另一个id进行了尝试，并复制了javascript。但第二种方法行不通。只有第一个滑块工作正常

JS:

HTML:

---

如何更改javascript代码才能在站点上使用多个幻灯片？

您可以将代码转换为非常简单的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()
});

只需为主要元素提供一个通用类，并按如下方式使用：

$.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()
});

插件中的每个

循环将隔离实例

为什么不为此编写一个插件呢

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

请同时添加html代码