Javascript滑块显示白色屏幕

嗨，我正在用javascript为我的公文包构建一个javascript滑块。幻灯片正常工作，但当我添加淡入淡出的过渡时，我会在两张幻灯片之间看到一道白色闪光。有人知道如何在它们之间创建平滑渐变吗

我在下面添加了一个JSfiddle

以下是我的javascript：

     $(function () {
    var theInterval; // Slide speed
    var images = new Array();
    var counter = 1;
    var defaultSettings = {
        "sliderContainer": "#slider" // SliderContainer
        , "pauseWithMouse": true // Turn on/off pause with mouse
        , "sliderSpeed": 3000 // Slide speed
        , "transitionSpeed": 200 // transition speed
    };
    // intialize slider   
    // if myImages exists then
    images = myImages;
    if (images.length > 0) {
        $(defaultSettings.sliderContainer).append('<img id="sliderImg" width="900" src="' + images[0] + '" />');
        startSlide(images);
    }

    function cycleImages(images) {
        if (counter >= images.length) {
            counter = 0;
        }
        console.log(counter);
        document.getElementById("sliderImg").src = images[counter];
        counter++;
        var images = $('#sliderImg')
        var now = images.filter(':visible')
        var next = now.next().length ? now.next() : images.first()
        var speed = defaultSettings.transitionSpeed; //Transition speed
        now.fadeOut(speed);
        next.fadeIn(speed);
    }

    function startSlide() {
        console.log('start');
        theInterval = setInterval(function () {
            cycleImages(images);
        }, defaultSettings.sliderSpeed);
        // Set interval time
    };
    var stopSlide = function () { // Stop slides on hover
        console.log('stop');
        if (defaultSettings.pauseWithMouse) {
            clearInterval(theInterval);
        }
    };
    $('#sliderImg').on('mouseover', function () { // Stop slides on mouseover
        stopSlide();
    });
    $('#sliderImg').on('mouseout', function () { // Continue with slides on mouseout
        startSlide();
    });
});

$（函数（）{
var theInterval；//滑动速度
var images=新数组（）；
var计数器=1；
var defaultSettings={
“sliderContainer”：“#slider”//sliderContainer
，“pauseWithMouse”：true//使用鼠标打开/关闭暂停
，“滑动速度”：3000//滑动速度
，“过渡速度”：200//过渡速度
};
//初始化滑块
//如果myImages存在，那么
图像=我的图像；
如果（images.length>0）{
$（defaultSettings.sliderContainer）.append（“”）；
startSlide（图像）；
}
函数循环图像（图像）{
如果（计数器>=images.length）{
计数器=0；
}
控制台日志（计数器）；
document.getElementById（“sliderImg”）.src=images[counter]；
计数器++；
变量图像=$（“#sliderImg”）
var now=images.filter（“：visible”）
var next=now.next（）.length？now.next（）：images.first（）
var speed=defaultSettings.transitionSpeed；//转换速度
现在，淡出（速度）；
其次，fadeIn（速度）；
}
函数startSlide（）{
console.log（'start'）；
theInterval=setInterval（函数（）{
周期图像（图像）；
}，defaultSettings.sliderSpeed）；
//设定间隔时间
};
var stopSlide=function（）{//悬停时停止幻灯片
console.log（'stop'）；
如果（默认设置。暂停鼠标）{
clearInterval（区间）；
}
};
$（'#sliderImg'）。在（'mouseover'，函数（）{//在mouseover上停止幻灯片
止动滑块（）；
});
$（'#sliderImg'）。在（'mouseout'，函数（）{//在mouseout上继续幻灯片
startSlide（）；
});
});

---

发生这种情况是因为淡入时没有背景。解决此问题的最简单方法是向图像或幻灯片添加

z-index

属性

例如，第一幅图像的z指数为1，第二幅图像的z指数为2

以下是您应该实现的代码：

var subs  = $(this).find('#sliderImg');
var index = subs.eq(0).css('z-index');
subs.gt(0).each(function() {
    $(this).css('z-index', ++index);
});

其思想是通过您提供的标签

#sliderImg

访问数组的每个元素，并使用jQuery方法each将z-index css属性增加为1

---

这是一把工作小提琴：

检查你的JS小提琴并编辑它，这样我就能帮助你。@ZombieChowder嘿，我添加了一把工作小提琴；当图像在一个数组中，我想添加更多图像时，这怎么可能呢？@BjörnVanSteenberghe现在检查一下，它应该工作得很好。