Question

我想要11个图像淡入淡出并按顺序淡出。我已将它们存储在一个数组中，并希望逐个循环它们并将它们显示在一个div中。但它只显示阵列中的最后一个图像11次。请指出我正确的方向。刚开始使用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。

＆＃13;

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

＆＃13;

Answer 1

那些fadeIn和fadeOut函数是异步的，它们同时运行，这就是你只能看到最后一张图像的原因。

假设您已填充数组，请尝试以下操作：

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

这样的事情应该有效。像以前一样填充数组，然后只需调用传递intImage为0的函数，从图像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);
    });
});

希望这会有所帮助，因为我目前正在工作，快速打字。

如何使用jquery使用一些图像创建电影效果？

1 个答案: