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はあまりなれていないので根本的に間違えがあれば教えていただければ幸いです。
(質問文は編集できます)「複数設置」した状態のHTMLを提示されては?また、その画像ファイル名の規則性もあわせて質問文に追記してください。
回答2件
あなたの回答
tips
プレビュー