setTimeoutを使用した自動画像切り替えについて
受付中
回答 2
投稿
- 評価
- クリップ 0
- VIEW 178
お世話になります。
今回は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を用いて変化させていくということを行いたいと考えましたがうまく動作しません。
解決案はありますでしょうか。よろしくお願いします。
-
気になる質問をクリップする
クリップした質問は、後からいつでもマイページで確認できます。
またクリップした質問に回答があった際、通知やメールを受け取ることができます。
クリップを取り消します
-
良い質問の評価を上げる
以下のような質問は評価を上げましょう
- 質問内容が明確
- 自分も答えを知りたい
- 質問者以外のユーザにも役立つ
評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。
質問の評価を上げたことを取り消します
-
評価を下げられる数の上限に達しました
評価を下げることができません
- 1日5回まで評価を下げられます
- 1日に1ユーザに対して2回まで評価を下げられます
質問の評価を下げる
teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。
- プログラミングに関係のない質問
- やってほしいことだけを記載した丸投げの質問
- 問題・課題が含まれていない質問
- 意図的に内容が抹消された質問
- 広告と受け取られるような投稿
評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。
質問の評価を下げたことを取り消します
この機能は開放されていません
評価を下げる条件を満たしてません
質問の評価を下げる機能の利用条件
この機能を利用するためには、以下の事項を行う必要があります。
- 質問回答など一定の行動
-
メールアドレスの認証
メールアドレスの認証
-
質問評価に関するヘルプページの閲覧
質問評価に関するヘルプページの閲覧
+2
普通に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);
})();投稿
-
回答の評価を上げる
以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
-
回答の評価を下げる
下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。
+1
期待される動作は、画面reload後 6秒後に最初の画像が表示されてそのあと１秒間隔で別の画像に切り替わるというのを繰り返すということでしょうか?
画像が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);投稿
-
回答の評価を上げる
以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
-
回答の評価を下げる
下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。
15分調べてもわからないことは、teratailで質問しよう！
- ただいまの回答率 90.84%
- 質問をまとめることで、思考を整理して素早く解決
- テンプレート機能で、簡単に質問をまとめられる
