teratail header banner
teratail header banner
質問するログイン新規登録

質問編集履歴

1

書式の改善

2019/03/03 14:46

投稿

shotaroice
shotaroice

スコア20

title CHANGED
File without changes
body CHANGED
@@ -1,16 +1,22 @@
1
1
  javascript を使った一定秒間隔で画像を切り替えるアニメーションを複数設置したいのですが、
2
2
  うまいやり方が分からず一つまでしか動作しません
3
3
  ```HTML
4
- <div id="animateField">
4
+ <div id="animateField1">
5
- <img src="/images/pic1.png">
5
+ <img src="/images/apple1.png">
6
6
  </div>
7
+ <div id="animateField2">
8
+ <img src="/images/lemon1.png">
9
+ </div>
10
+ <div id="animateField3">
11
+ <img src="/images/tomato1.png">
12
+ </div>
7
13
  ```
8
14
  ```JS
9
15
  $(function(){
10
16
  var count = setInterval(changeImg, 2000);//2秒間隔
11
17
  i = 1;
12
18
  function changeImg(){
13
- $("#animateField").children("img").attr("src","/images/pic" + i + ".png");
19
+ $("#animateField1").children("img").attr("src","/images/apple" + i + ".png");
14
20
  if(i <= 1){
15
21
  i++;
16
22
  }
@@ -18,6 +24,24 @@
18
24
  i = 1;
19
25
  }
20
26
  }
27
+ function changeImg(){
28
+ $("#animateField2").children("img").attr("src","/images/lemon" + i + ".png");
29
+ if(i <= 1){
30
+ i++;
31
+ }
32
+ else{
33
+ i = 1;
34
+ }
35
+ }
36
+ function changeImg(){
37
+ $("#animateField3").children("img").attr("src","/images/tomato" + i + ".png");
38
+ if(i <= 1){
39
+ i++;
40
+ }
41
+ else{
42
+ i = 1;
43
+ }
44
+ }
21
45
  });
22
46
 
23
47
  ```