Question

我已经在youtube上的教程中创建了我自己的图像/ div滑块，它的工作方式应该基于代码，但是，我注意到，因为他们使用fadeOut（）然后使用fadeIn（）命令，在淡入淡出之间出现白色闪光（因为背景为白色）。无论如何有人可以在代码中添加一些内容以使其成为Crossfades吗？我的意思是下一个图像淡入但前一个图像还没有消失，但仍然循环？这是代码：

sliderInt = 1;
sliderNext = 2;

$(document).ready(function() {

    startSlider();

});

function startSlider() {

    count = $("#slider > .bg").size();

    loop = setInterval(function() {

        if(sliderNext > count) {
            sliderNext = 1;
            sliderInt = 1;
        }

        $("#slider > .bg").fadeOut(300);
        $("#slider > .bg#" + sliderNext).fadeIn(300);     

        sliderInt = sliderNext;
        sliderNext = sliderNext + 1;

    }, 6000);

}

Answer 1

交叉渐变是通过淡入而完成的，同时已经在淡入的图像下面有一个图像。

sliderNext = 1;

$(document).ready(function() {    
  startSlider();    
});

var to_img;

function startSlider() {

    count = $("#slider > .bg").size();

    loop = setInterval(function() {

        if(sliderNext > count) {
            sliderNext = 1;
        }

        $("#slider > .bg").css('z-index', 0);

        if (to_img != null)
          to_img.css('z-index', 1)

        to_img = $("#slider > .bg#" + sliderNext);
        to_img.css('opacity', 0).css('z-index', 2).fadeIn(300);

        sliderNext = sliderNext + 1;

    }, 6000);

}

jquery：交叉渐变而不是fadeOut然后fadeIn

1 个答案: