图像推子的多个副本

Multiple Copies of Image Fader

本文关键字：副本 图像      更新时间：2023-09-26

以下代码淡化了"幻灯片"div 中单个div 中的一组图像，并且可以完美运行。问题是它仅适用于一组图像。只是想知道是否有任何方法可以创建一个"slideshow2"div 并让这组图像也淡出。任何投入都将得到极大的赞赏。

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

你可以这样做（不再编写相同的代码）：

$(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"）;

给你的两个幻灯片div 同一个类，比如.slideshows。
然后按如下方式修改您的代码...

$（函数（） {

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

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

相关文章：