jquery简单图像幻灯片，用于现场多张幻灯片答案

【问题标题】：jquery simple image slideshow for more than one slideshow on sitejquery简单图像幻灯片，用于现场多张幻灯片
【发布时间】：2014-11-22 06:29:29
【问题描述】：

这里的解决方案 (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 代码才能在网站上处理多个幻灯片？

【问题讨论】：

请同时添加html代码

标签： javascript jquery slider slideshow

【解决方案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

【讨论】：

【解决方案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
});

【讨论】：