javascript - 图像衰减器的多个副本

Question

以下代码淡化了“幻灯片” div 中单个 div 中的一组图像，并且效果很好。问题是它只适用于一组图像。只是想知道是否有任何方法可以创建“slideshow2” div 并让这组图像也淡出。任何输入将不胜感激。

    $(function() {

        $("#slideshow > div:gt(0)").hide();

        setInterval(function() { 
          $('#slideshow > div:first')
            .fadeOut(1000)
            .next()
            .fadeIn(1000)
            .end()
            .appendTo('#slideshow');
        },  3000);

    });

Answer 1

好吧，您可以这样做（不再编写相同的代码）：

$(function() {
    fade_function("#slideshow");
});


function fade_function(div_id)
{
   $(div_id+" > div:gt(0)").hide();
   setInterval(function() { 
      $(div_id+' > div:first')
        .fadeOut(1000)
        .next()
        .fadeIn(1000)
        .end()
        .appendTo(div_id);
    },  3000);
}

并且每当您需要调用 fade_function("your_div_here");

Answer 2

为您的幻灯片 div 提供相同的类，例如.slideshows.
然后修改您的代码如下...

$（函数（）{

    $(".slideshows > div:gt(0)").hide();

    setInterval(function() { 
      $('.slideshows > div:first')
        .fadeOut(1000)
        .next()
        .fadeIn(1000)
        .end()
        .appendTo('.slideshows');
    },  3000);

});

这样，您的代码将同时为两个幻灯片执行，而无需使用单独的函数。:)