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

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

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

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

Q&A

解決済

2回答

4344閲覧

setTimeoutを使用した自動画像切り替えについて

kuroishi

総合スコア53

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

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

0グッド

0クリップ

投稿2018/06/15 12:08

お世話になります。

今回はjQueryを用いて画像を永久的に繰り返すコードを考えました。

HTML

<div id="back_img"></div>

CSS

#back_img{ width: 100%; height: 100%; z-index: 1; position: absolute; top: 0; margin-top: 0; background-image: url(img/IMG_0193_preview.jpg); background-position: center; background-size: cover; }

jQuery

setInterval(function(){ $('#back_img').css('background-image','url(img/IMG_0193_preview.jpg)'); setTimeout(function(){ $('#back_img').animate({backgroundImage:'url(img/IMG_0958.jpg)'},1000); },1000); setTimeout(function(){ $('#back_img').animate({backgroundImage:'url(img/IMG_0193_preview.jpg)'},1000); },1000); setTimeout(function(){ $('#back_img').animate({backgroundImage:'url(img/IMG_0958.jpg)'},1000); },1000); setTimeout(function(){ $('#back_img').animate({backgroundImage:'url(img/IMG_0193_preview.jpg)'},1000); },1000); setTimeout(function(){ $('#back_img').animate({backgroundImage:'url(img/IMG_0958.jpg)'},1000); },1000); },6000);

やりたいこととしては、6秒間の繰り返しのなかで画像を1秒ごとにbackground-imageを用いて変化させていくということを行いたいと考えましたがうまく動作しません。
解決案はありますでしょうか。よろしくお願いします。

気になる質問をクリップする

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

ベストアンサー

普通にsetIntervalだけで解決可能。

(function(){ let i = 0; let images = [ 'img/IMG_0193_preview.jpg', 'img/IMG_0958.jpg' ]; let pid = setInterval(function(){ $('#back_img').animate({backgroundImage:'url(' + images[i % images.length] + ')'},1000); if(i++ > 5){ clearInterval(pid); } }, 1000); })();

投稿2018/06/15 14:41

編集2018/06/15 14:49
tkturbo

総合スコア5572

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

期待される動作は、画面reload後 6秒後に最初の画像が表示されてそのあと1秒間隔で別の画像に切り替わるというのを繰り返すということでしょうか?

画像が2つだけなら、以下のような感じですね。

var galary = [ 'url(http://d1f5hsy4d47upe.cloudfront.net/a3/a3827696f0496bb297738a9ee6a27902_t.jpeg)', 'url(http://01.gatag.net/img/201505/25l/gatag-00005175.jpg)' ]; var index = 0; setInterval(function() { $('#back_img').css('background-image', galary[index]); setTimeout(function() { index = (index === 0) ? 1 : 0; $('#back_img').animate({ backgroundImage: galary[index] }, 1000); }, 1000); }, 3000);

【動作サンプル】
https://jsfiddle.net/euledge/xu8p2dcm/

動かない理由ですが、以下のように書いた場合一見、上から順に1秒ごとに$('#back_img').animate()が動くように思いますが、実際には非同期で処理されるため1秒後に6つのanimete()が呼ばれることにあります。

setTimeout(function() { $('#back_img').animate({backgroundImage: イメージ1}, 1000); }, 1000); setTimeout(function() { $('#back_img').animate({backgroundImage: イメージ2}, 1000); }, 1000); setTimeout(function() { $('#back_img').animate({backgroundImage: イメージ1}, 1000); }, 1000); setTimeout(function() { $('#back_img').animate({backgroundImage: イメージ2}, 1000); }, 1000); setTimeout(function() { $('#back_img').animate({backgroundImage: イメージ1}, 1000); }, 1000); setTimeout(function() { $('#back_img').animate({backgroundImage: イメージ2}, 1000); }, 1000);

投稿2018/06/15 13:28

euledge

総合スコア2404

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問