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

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

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

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

Q&A

解決済

2回答

3536閲覧

javascript 画像の切り替えを複数設置したい

shotaroice

総合スコア20

JavaScript

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

0グッド

0クリップ

投稿2019/03/03 14:25

編集2019/03/03 14:46

javascript を使った一定秒間隔で画像を切り替えるアニメーションを複数設置したいのですが、
うまいやり方が分からず一つまでしか動作しません

HTML

1<div id="animateField1"> 2<img src="/images/apple1.png"> 3</div> 4<div id="animateField2"> 5<img src="/images/lemon1.png"> 6</div> 7<div id="animateField3"> 8<img src="/images/tomato1.png"> 9</div>

JS

1$(function(){ 2 var count = setInterval(changeImg, 2000);//2秒間隔 3 i = 1; 4 function changeImg(){ 5 $("#animateField1").children("img").attr("src","/images/apple" + i + ".png"); 6 if(i <= 1){ 7 i++; 8 } 9 else{ 10 i = 1; 11 } 12 } 13 function changeImg(){ 14 $("#animateField2").children("img").attr("src","/images/lemon" + i + ".png"); 15 if(i <= 1){ 16 i++; 17 } 18 else{ 19 i = 1; 20 } 21 } 22 function changeImg(){ 23 $("#animateField3").children("img").attr("src","/images/tomato" + i + ".png"); 24 if(i <= 1){ 25 i++; 26 } 27 else{ 28 i = 1; 29 } 30 } 31}); 32

idを変えて複数設置したのですがうまく行きませんでした
JSはあまりなれていないので根本的に間違えがあれば教えていただければ幸いです。

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

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

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

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

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

kei344

2019/03/03 14:39

(質問文は編集できます)「複数設置」した状態のHTMLを提示されては?また、その画像ファイル名の規則性もあわせて質問文に追記してください。
guest

回答2

0

ベストアンサー

あらかじめリストにしておくとか

javascript

1<script> 2var imgs={ 3 "apple":[ 4 "https://placehold.jp/ff0000/000000/150x150.png?text=apple1", 5 "https://placehold.jp/00ff00/000000/150x150.png?text=apple2", 6 "https://placehold.jp/0000ff/000000/150x150.png?text=apple3", 7 ], 8 "lemon":[ 9 "https://placehold.jp/ffff00/000000/100x150.png?text=lemon1", 10 "https://placehold.jp/00ffff/000000/100x150.png?text=lemon2", 11 "https://placehold.jp/ff00ff/000000/100x150.png?text=lemon3", 12 "https://placehold.jp/808080/ffffff/100x150.png?text=lemon4", 13 ], 14 "tomato":[ 15 "https://placehold.jp/808080/000000/120x100.png?text=tomato1", 16 "https://placehold.jp/000000/ffffff/120x100.png?text=tomato2", 17 ], 18}; 19var c=0; 20window.addEventListener('DOMContentLoaded', function(e){ 21 setInterval((function hoge(){ 22 document.querySelector('#animateField1 img').src=imgs["apple"][c%(imgs["apple"].length)]; 23 document.querySelector('#animateField2 img').src=imgs["lemon"][c%(imgs["lemon"].length)]; 24 document.querySelector('#animateField3 img').src=imgs["tomato"][c%(imgs["tomato"].length)]; 25 c++; 26 return hoge; 27 })(),2000); 28}); 29</script> 30<div id="animateField1"> 31<img alt="apple"> 32</div> 33<div id="animateField2"> 34<img alt="lemon"> 35</div> 36<div id="animateField3"> 37<img alt="tomato"> 38</div> 39

投稿2019/03/04 01:36

yambejp

総合スコア114572

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

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

0

これでどうでしょう。

js

1$(function(){ 2 var count = setInterval(changeImg, 2000);//2秒間隔 3 i = 1; 4 function changeImg(){ 5 $("#animateField1").children("img").attr("src","/images/apple" + i + ".png"); 6 $("#animateField2").children("img").attr("src","/images/lemon" + i + ".png"); 7 $("#animateField3").children("img").attr("src","/images/tomato" + i + ".png"); 8 if(i <= 1){ 9 i++; 10 } 11 else{ 12 i = 1; 13 } 14 } 15});

投稿2019/03/03 14:51

kei344

総合スコア69364

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問