質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.62%

  • jQuery

    6524questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

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

解決済

回答 3

投稿 編集

  • 評価
  • クリップ 1
  • VIEW 765

otya

score 13

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の数字を増やすにはどこを改善したらいいのでしょうか?
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 3

+2

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2015/09/18 16:35

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

    キャンセル

checkベストアンサー

+1

とりあえず、ひとつ目の例は「エフェクトが実行される前に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();

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2015/09/18 16:34

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

    キャンセル

0

ふたつの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>

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2015/09/18 16:36

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

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.62%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る

  • jQuery

    6524questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。