jqueryを使用していくつかの画像でムービーエフェクトを作成するにはどうすればよいですか？

11枚の画像をフェードインしてシーケンス内でフェードアウトさせたい。私は配列にそれらを格納し、それらを1つずつ循環させて、それらを1つのdiv内に表示したいと思います。しかし、アレイの最後の画像は11回だけ表示されます。正しい方向に私を指差してください。 jqueryから始める。jqueryを使用していくつかの画像でムービーエフェクトを作成するにはどうすればよいですか？

$(document).ready(function() { 

    // variable counter for image number. 
    slideNum = 1; 
    $("#startComic").click(function() { 
     var movie = []; 
     while (slideNum <= 11) { 
      movie[slideNum - 1] = '<img src="images/slide (' + slideNum + ').png"' + ' alt = "movie slide">'; 
      slideNum++; 
     } 
     for (var i = 0; i < movie.length; i++) { 
      $("#slide").html(movie[i]); 
      $("#slide").fadeIn(1000); 
      $("#slide").fadeOut(2000); 

     } 
    }); 
});

ここにhtmlがあります。

<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
\t <title>Web Comic</title> 
 
\t <meta charset="utf-8"> 
 
\t <link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css"> 
 
\t <link rel="stylesheet" href="style.css"> 
 
\t <script src="../jquery-3.1.0.min.js"></script> 
 
\t <script src="script.js"></script> 
 
</head> 
 
<body> 
 
\t <button class="btn btn-primary" id="startComic">Start</button> 
 
\t <div id="slide"></div> 
 
\t <button class="btn btn-primary" id="playAgain">Play Again</button> 
 

 
</body> 
 
</html>

出典

2016-09-17 Br34th7aking

これらのフェードインとフェードアウト機能は、彼らはあなたが唯一の最後の画像を参照してください理由である、同時に実行、非同期です。このような何かが動作するはず

function nextImage(intImage) { 
    // Bail after the last image. 
    // 
    if (intImage == movie.length) 
     return; 

    $("#slide").html(movie[intImage]); 
    $("#slide").fadeIn(1000); 
    $("#slide").fadeOut(1000); 

    // recursively call this function with increased intImage 
    // after a 2 second timeout to ensure both animations are complete 
    // 
    setTimeout(function() { 
     nextImage(intImage + 1); 
    }, 2000); 
}

：あなたは、配列を埋めてきたと仮定すると、

、のようなものを試してみてください。その後、単純に画像0で開始するために0としてintImageを渡す関数を呼び出す前に、としてあなたの配列を移入：私は仕事で、現在だと、このことができます

$(document).ready(function() { 

    // variable counter for image number. 
    slideNum = 1; 
    $("#startComic").click(function() { 
     var movie = []; 
     while (slideNum <= 11) { 
      movie[slideNum - 1] = '<img src="images/slide (' + slideNum + ').png"' + ' alt = "movie slide">'; 
      slideNum++; 
     } 

     nextImage(0); 
    }); 
});

希望は、スカイビング、迅速にそれを入力しました。

出典

2016-09-17 15:19:52 Nunchy

ありがとうございました。それは私が望むのとまったく同じように働いたここにコードにtypoがあります：nextImage（intImage +！）私はそれを1に変更することができません。親切にそれを見てください。 – Br34th7aking

それを指摘するためのGraciasは、非常に感謝しており、助けてうれしいです。 – Nunchy

jqueryを使用していくつかの画像でムービーエフェクトを作成するにはどうすればよいですか？

答えて

関連する問題