Question

以下代码淡化了“幻灯片”div中单个div中的一组图像，并且工作正常。问题是它只适用于一组图像。只是想知道是否有任何可能的方法来创建一个“幻灯片2”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 然后将您的代码修改如下......

$（function（）{

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

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

});

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

图像推子的多个副本

2 个答案: