Javascript幻燈片白色屏幕

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

什麼u想不能用一個圖像來實現，所以我用了兩個圖像以達到預期的效果。

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 2

的閃光效果，那是因爲你的下一個畫面已經可見淡入（）函數的調用之前，你解決它與旁邊添加.hide（）在now.fadeOut（）之前。

$(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 3

嘗試改變transitionspeed 0