HTML CSSのスライドショーの切り替え

Question

シンプルなHTMLスライドショーのためのシンプルなJavaScriptコードを書きました。イメージは配列内にあり、5秒ごとに変化します。

0 opacityを超えてに遷移する現在の画像の4番目の時刻を望んでいます。これは、画像が遷移して表示されなくなったら、次の画像が読み込まれてから、すべての画像。

私のコードは以下の通りです。

CSS

#slider { 
    opacity: 1; 
    transition: opacity 1s; 
    border-radius: 10px; 
    box-shadow: -5px 7px 5px #888888; 
    width: 99vw; 
    height: 470px; 
    align: middle; 
} 

#slider.fadeOut { 
    opacity: 0; 
} 

HTML

<img id="slider" src="Images/image1"> 

はJavaScript

var imgArray = [ 
    'Images/image1.jpg', 
    'Images/image2.jpg', 
    'Images/image3.jpg', 
    'Images/image4.jpg', 
    'Images/image5.jpg', 
    'Images/image6.jpg', 
    'Images/image7.jpg', 
    'Images/image8.jpg' 
    ], 
curIndex = 0; 

imgDuration = 5000; 

function slideShow() { 
    document.getElementById('slider').className += "fadeOut"; 
    setTimeout(function() { 
     document.getElementById('slider').src = imgArray[curIndex]; 
     document.getElementById('slider').className = ""; 
    },1000); 

    curIndex++; 

    if (curIndex == imgArray.length) { 
     curIndex = 0; 
    } 

    setTimeout(slideShow, imgDuration); 
} 
slideShow(); 

問題は、画像を1秒とし、同じ画像の上にフェードアウトしますので、遷移はビクビクしているありますまだ表示されている場合、次の画像は遷移なしでロードされます。

これは私が見落としている簡単な修正だと確信しています。

Answer 1

イメージ上でsrcを変更してもイメージファイルをロードする必要があり、残りのプロセスを続行する前にイメージファイルがロードされるのを待っていないためです。

あなたのメソッドはイメージをロードし、完了したらコールバック関数を使用し、残りの処理を行う必要があります。

UPDATE：

だから私はあなたの例では、CSSトランジションを使用しています知っているし、これはjQueryのを使用していますが、私はあなたがコールバック関数を連鎖の利点を見てみたかったです。注意深く見ると、フェードアウトが完了するまでimg要求がどのように行われていないかを見ることができ、スクリプトがimgをロードし、そのロードが完了したときにのみ新しいイメージをコンテナに入れてフェードアウトさせますそれが消えたら、次のコールバックはsetTimeoutをもう一度呼び出して、それを維持します。このようにして、すべての行動が順番に起こります。

var imgArray = [ 
 
    'http://www.fillmurray.com/200/300', 
 
    'http://www.fillmurray.com/300/200', 
 
    'http://www.fillmurray.com/500/200', 
 
    'http://www.fillmurray.com/300/600', 
 
    'http://www.fillmurray.com/350/200', 
 
    'http://www.fillmurray.com/300/350', 
 
    ], 
 
curIndex = 0; 
 
imgDuration = 5000; 
 

 
function slideShow() { 
 
    $("#slider").fadeOut('slow',function() { 
 
     var img = $("<img />").attr('src', imgArray[curIndex]) 
 
     .on('load', function() { 
 
      $("#slider").html(img).fadeIn('normal',function(){ 
 
       curIndex++; 
 
       if (curIndex == imgArray.length) { 
 
        curIndex = 0; 
 
       } 
 
       setTimeout(slideShow, imgDuration); 
 
      }); 
 
      
 
     }); 
 
    }); 
 
} 
 

 
slideShow();

#slider { 
 
    border-radius: 10px; 
 
    box-shadow: -5px 7px 5px #888888; 
 
} 
 

 
#slider img { 
 
    width: 99vw; 
 
    height: 470px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="slider"></div>