Question

您好我正在使用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();
    });
});

The JS Fiddle Link

Answer 1

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

例如，为第一张图片提供 z-index为1 ，第二张为 z-index为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方法每个来增加 z-index css属性用1。

这是一个工作小提琴：Working Fiddle

Javascript滑块显示白屏

1 个答案: