0

以下に使用しようとしている次のjQueryコードがあります（最適化されていないことはわかっていますが、それが問題だとは思いませんが、自由に最適化してください）：

$(document).ready(function(){
  var cur = 0;
  function slideshow() {
  $("#imgdisp").fadeOut(400);
  if (cur >= 3) {
    cur = 1;
  } else {
    cur++;
  }
  $("#imgdisp").empty().append("<img height='456px' width='691px' id='img' src='slideshow_home/home_"+cur+".jpg'>");
    $("#imgdisp").fadeIn(400);
    setTimeout(slideshow,4000);
  }
  slideshow();
})

次の HTML ファイルを使用します。

<!DOCTYPE html>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="jscodes/slideshow.js"></script>
<link type="text/css" rel="stylesheet" href="csscodes/slideshow.css">
<div id="imgdisp">
<img height="456px" width="691px" id="img" src="slideshow_home/home_1.jpg">
</div>
</html>

私が作成しようとしているのは、次のことを行うスライドショーです(順番に):

1) 現在の画像をフェードアウト

2) 現在の画像を削除する

3) 新しい画像を追加します (home_2.jpg と呼ばれ、home_3.jpg になります)。

4) フェードイン

5) 4 秒待ってから、次の画像を繰り返します

ただし、このコードを実行しようとすると、フェードアウトする前に新しい画像が追加されるため、画像が突然表示され、フェードアウトしてからフェードインし、繰り返す前に 4 秒待機します。私の質問は次のとおりです。

1) div がフェードアウトしている間に画像を変更するようにこのコードを修正するにはどうすればよいですか?

2) 画像をすぐに次の画像にフェードさせる方法はありますか?

貢献してくれたすべての人に前もって感謝します:)

4

4 に答える 4

1

ここでNivoSlider利用可能なjQueryプラグインを使用できます

于 2013-01-08T09:11:48.310 に答える
1

これを試して：

$(document).ready(function(){
    var cur = 0;
    function slideshow() {
        if (cur >= 3) {
            cur = 1;
        } else {
            cur++;
        }
        $("#imgdisp").empty().append("<img height='456px' width='691px' id='img' src='slideshow_home/home_"+cur+".jpg'>");
        $("#imgdisp").fadeIn(400);
        setTimeout(removeCurrent, 4000);
    }

    function removeCurrent(){
        $("#imgdisp").fadeOut(400);
        slideshow();
    }
    slideshow();
});
于 2013-01-08T08:17:33.580 に答える
0

これを試してください：

$(document).ready(function(){
        var cur = 1;
        function slideshow() {
            if (cur >= 3) {
                cur = 1;
            } else {
                cur++;
            }
            setTimeout(function(){
                $("#imgdisp").fadeOut(400, function(){
                    $("#imgdisp").empty().append("<img height='456px' width='691px' id='img' src='img_"+cur+".jpg'>");
                    $("#imgdisp").fadeIn(400);
                });
                slideshow();
            }, 4000);
        }
        slideshow();
    });
于 2013-01-09T00:08:48.867 に答える
0

dunliの上に、いくつかの変更を加えて、探していることを実行できます-

$(document).ready(function(){
    var cur = 0;
    function slideshow() {
        if (cur >= 3) {
            cur = 1;
        } else {
            cur++;
        }

        $("#imgdisp").empty().append("<img style='display:none' src='image_path/home_"+cur+".jpg' />");
        $("#imgdisp img").fadeIn(400);
        setTimeout(removeCurrent, 4000);
    }

    function removeCurrent(){
        $("#imgdisp img").fadeOut(400);
        slideshow();
    }
    slideshow();
});
于 2013-01-08T09:27:16.407 に答える