Javascriptスライダーが白い画面を表示

Question

こんにちは私はJavascriptで私のポートフォリオのためのjavascriptスライダーを構築しています。スライドは正常に動作しますが、フェージングの移行を追加すると、2つのスライドの間に白いフラッシュが続きます。誰もがそれらの間にスムーズなフェードを作成する方法を知っていますか？

以下に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プロパティを追加することです。

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

：例えば

ここで2

のz屈折率を使用して、実装する必要コードである第一の画像を1のz屈折率及び第二のものを与えます考え方は、#sliderImgのタグを使用して配列の各要素にアクセスし、jQueryメソッドをそれぞれとし、z-indexのCSSプロパティを増やすことですWorking Fiddle