jQueryでの画像のスライドショーについて

Question

otyaと申します。

jqueryでプラグインは使わずにスライドショーを行うプログラムを考えています。
下記の変数aに代入される数字を1ずつ増やしたいです。
しかし、

$(function(){
    var a = 1; //画像ファイルの数字

    //スライドショーを行う関数
    function abc(){
        $(".test").attr("src", "画像のパス" + a + ".jpg"); //画像をattr()メソッドで変更
        $(".test").fadeIn("slow");
        $(".test").fadeOut("slow");
}

    abc(); //実行
});

上記のようにattrメソッドで画像を変えて実行するところまでは出来ましたが、

$(function(){
    var a = 1; //画像ファイルの数字

    //スライドショーを行う関数
    function abc(){
        $(".test").attr("src", "画像のパス" + a + ".jpg"); //画像をattr()メソッドで変更
        $(".test").fadeIn("slow");
        $(".test").fadeOut("slow");
}

    abc(); //実行
    a++;
    abc(); //実行
});

というふうに書くと、最初の関数実行時から変数aに2が代入されてしまいます。

また、

$(function(){
    var a = 1; //画像ファイルの数字

    //スライドショーを行う関数
    function abc(){
        $(".test").attr("src", "画像のパス" + a + ".jpg"); //画像をattr()メソッドで変更
        $(".test").fadeIn("slow");
        $(".test").fadeOut("slow");
        a++;
        abc();
}

    abc(); //実行
});

と書くと、想像では変数aの中の数字が増えながらabc関数が実行されるのですが、現実では変数aの数字が増えないままabc関数が実行されます。

変数aの数字を増やして画像を順に表示させたいのですが、変数aの数字を増やすにはどこを改善したらいいのでしょうか？

Answer 1

明言されていませんが、恐らくページの更新無しに、一定時間毎にスライドを入れ替えたいんですよね？
そういう時は setIntervalで良いかと思います。
とりあえずはこんな感じで動くのじゃないでしょうか？
※一番最初のコードで 「abc(); //実行」の所を

setInterval(function(){
    abc();
    a++;
  },10000); //10秒ごとに切り替え

Comments

[otya]

回答ありがとうございます。

Answer 2

とりあえず、ひとつ目の例は「エフェクトが実行される前にa=1とa=2の状態のattr変更が実行されてます。
jQueryのエフェクトは非同期に実行されてますので、fadeInメソッドなどが終わる前にabc関数の実行が終わってしまうんです。ですので、a=1でのfadeInメソッドが終わる前にa++が実行されます。関数の最後にでもalert();を挿入してみると分かりやすいかもしれません。

ふたつ目の結果も同様だと思います。こちらは無限ループになっていますから、a=1でのfadeInメソッドが終わる前にaはとても大きな数になっているはずです。そしてsrc要素が書き換えられ続けているので画像が差し変わるレンダリングがされないのではないかと思います。

追記
サンプル置いておきます。
http://jsfiddle.net/qsnfnou2/

var a = 1;

function abc(){
        $(".test").attr("src", "http://placehold.jp/200x200.png?text=" + a);
        $.when($(".test").on('load'))
        .then(function(){
            $(".test").fadeIn("slow");
            return $(".test").fadeOut("slow");
        })
        .then(function(){
            a++;
            abc();
        });
}

abc();

Comments

[otya]

回答ありがとうございます。
詳しく説明していただき理解が出来ました。
サンプルまでありがとうございます。

Answer 3

ふたつのimgタグを使って、fadein-outを交互にして見たサンプルです。
お役に立てれば。

<div id="image" style="position: relative;">
  <img src="" style="position: absolute;top: 0;left: 0;" />
  <img src="" style="position: absolute;top: 0;left: 0;" />
</div>
<script>
  $(function(){

    var interval = 5000;  // 画像切替タイミング(ミリ秒)
    var img_cnt = 3;      // 画像数

    var a = 0, b = 0;
        
    var $imgs = $('#image img'),
        $img1 = $imgs.eq(0),
        $img2 = $imgs.eq(1);
    
    function abc(){
      a = b+1;if (a > img_cnt) a=1;
      $img1.hide();
      $img1.attr("src", "[画像パス]" + a + ".jpg");
      $img1.fadeIn(interval, function() {
        $img1.fadeOut(interval, function(){
          abc();
        });
      });
    }
    
    function efg() {
      $img2.fadeOut(interval, function() {
        b = a+1;if (b > img_cnt) b=1;
        $img2.attr("src", "[画像パス]" + b + ".jpg");
        $img2.fadeIn(interval, function(){
          efg();
        });
      });
    }

    abc();
    efg();

  });
</script>

Comments

[otya]

回答ありがとうございます。
サンプルもありがとうございます。