Comment puis-je créer un effet de film avec quelques images en utilisant jquery?

Je souhaite que 11 images s'affichent et disparaissent dans une séquence. Je les ai stockés dans un tableau et je veux les parcourir un par un et les afficher à l'intérieur d'un seul div. Mais il affiche seulement la dernière image dans le tableau 11 fois. S'il te plait, oriente moi dans la bonne direction. Je commence juste avec jquery.Comment puis-je créer un effet de film avec quelques images en utilisant 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); 

     } 
    }); 
});

Et voici le code 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>

Source

2016-09-17 Br34th7aking

Ces fonctions fadeIn et fadeOut sont asynchrones, ils courent en même temps ce qui explique pourquoi vous ne voyez la dernière image.

supposant que vous avez peuplé le tableau, essayer quelque chose comme:

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

Quelque chose comme cela devrait fonctionner. Alimenter votre tableau comme avant alors simplement appeler la fonction passant intImage comme 0 pour commencer à l'image 0:

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

Hope this helps, tapé en place rapide que je suis actuellement au travail, racler.

Source

2016-09-17 15:19:52 Nunchy

Merci beaucoup. cela a fonctionné exactement comme je le voulais. Il y a une faute de frappe dans le code ici: nextImage (intImage +!). Je ne suis pas en mesure de le changer à 1. Veuillez le regarder. – Br34th7aking

Gracias pour le souligner, très apprécié et heureux d'aider. – Nunchy

Comment puis-je créer un effet de film avec quelques images en utilisant jquery?

Répondre

Questions connexes