Question

您好我正在使用Javascript为我的投资组合构建一个javascript滑块。幻灯片正常工作，但当我添加一个淡入淡出的过渡时，我不断在两张幻灯片之间获得白色闪光。谁知道如何在它们之间创造平滑的淡入淡出？

这是我的工作小提琴：https://jsfiddle.net/t9ezr8wr/2/

我的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();
});
});

Answer 1

闪光效果是因为你的下一张照片在调用fadeIn（）函数之前已经可见，你可以在now.fadeOut（）之前添加next.hide（）来修复它。

$(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": 800 // 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
        next.hide();
        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();
    });
});

body{
    margin: 0;
}

main {
    max-width: 100%;
    height: 737px;
    margin: auto;
    font-family: arial;
    position: relative;
    color: white;
}
    
#slider {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
}

#slider img {display:none; position: absolute; top: 0; left: 0;}

#slider img:first-child {display:block;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
      var myImages = ["https://s4.postimg.org/45u9pqnml/slide1.jpg", "https://s11.postimg.org/f3qwh4syb/slide2.jpg", "https://s24.postimg.org/b365xoq7p/slide3.jpg"];
  </script>
  <main>
  <div id="slider">
  </div>
</main>

Answer 2

用一张图片无法实现你想要的东西，所以我使用了两张图片来达到预期的效果。

JS：

$(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": 600 // transition speed
    };
    // intialize slider   
    // if myImages exists then
    images = myImages;
    if (images.length > 0) {
        $(defaultSettings.sliderContainer).append('<img id="sliderImg" width="900" style="display:block" src="' + images[0] + '" />');
        $(defaultSettings.sliderContainer).append('<img id="sliderImg2" width="900" style="display:none" src="' + images[1] + '" />');
        startSlide(images);
    }

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

        now.fadeOut(speed);
        next.fadeIn(speed,function(){
            document.getElementById("sliderImg").src = document.getElementById("sliderImg2").src;
            $("#sliderImg").css('display','block');
            $("#sliderImg2").css('display','none');
        });

    }

    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();
    });
});

CSS：

body{
    margin: 0;
}

main {
    max-width: 100%;
    height: 737px;
    margin: auto;
    font-family: arial;
    position: relative;
    color: white;
}

#slider {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
}

#slider img {display:none; position: absolute; top: 0; left: 0;}

#slider img:first-child {display:block;}
#slider img:nth-child(2) {display:none;}

Answer 3

尝试将transitionspeed更改为0

Javascript幻灯片白色屏幕

3 个答案: