teratail
回答率
85.48%
質問するログイン新規登録
トップJavaScriptに関する質問JSによる画像切り替えの際、無限にリクエストされないようにしたい

編集履歴

回答編集履歴

6

コードなおしました

2018/11/02 04:51

投稿

退会済みユーザー
test CHANGED
@@ -13,6 +13,8 @@
13
13
 
14
14
 
15
15
  あとは、最初だけ要素を追加していき、あとは表示/非表示を切り替えるとか。
16
+
17
+ (※コードの一部は他の回答を参考にしてます)
16
18
 
17
19
  ```javascript
18
20
 
@@ -42,7 +44,7 @@
42
44
 
43
45
  <!-- img要素のテンプレート -->
44
46
 
45
- <img id="" src="" alt="imageTemplate">
47
+ <img id="" src="https://placehold.jp/ff0000/00ffff/100x100.png?text=0" alt="error">
46
48
 
47
49
  </div>
48
50
 
@@ -50,49 +52,53 @@
50
52
 
51
53
  (function () {
52
54
 
53
- let urls = [
55
+ // 非表示クラスの名前
54
56
 
55
- "https://3.bp.blogspot.com/-Ncn2Gj8Aq9k/WwJZjGt-FBI/AAAAAAABMF0/5Uco6MFSragyb_xcDgrfuUFZMfx9diW2gCLcBGAs/s180-c/bird_okameinkogray.png",
56
-
57
- "https://2.bp.blogspot.com/-ZGlQ838OJn4/WwJZiNUEDdI/AAAAAAABMFw/zj44flVO6aEotsTfW5R5_uPafKXbC1VzQCLcBGAs/s180-c/bird_kibitaki.png",
58
-
59
- "https://3.bp.blogspot.com/-5wy0haI_pwk/WvQG_WkJifI/AAAAAAABL3c/qb7j7qZQCowYW1rKEAXMj08VY5ngw7sEQCLcBGAs/s180-c/bird_oomichibashiri_roadrunner.png",
60
-
61
- ];
62
-
63
- let imageContainer = document.getElementById('imageContainer');
64
-
65
- let imageTemplate = imageContainer.children[0];
66
-
67
- let noneDisplayClass = 'none';
57
+ const noneDisplayClass = 'none';
68
58
 
69
59
 
70
60
 
71
61
  // img要素のテンプレートを削除します
72
62
 
63
+ let imageTemaplate = document.querySelector('#imageContainer > img');
64
+
73
- imageTemplate.remove();
65
+ imageTemaplate.remove();
74
66
 
75
67
 
76
68
 
77
69
  // 繰り返し処理を開始します
78
70
 
79
- let prevIndex;
71
+ let states = {
80
72
 
81
- let crntIndex;
73
+ url: imageTemaplate.src.replace(/=\d/, '='),
82
74
 
83
- crntIndex = prevIndex = 0;
75
+ imageContainer: document.getElementById('imageContainer'),
84
76
 
77
+ imageTemaplate,
78
+
79
+ imageNum: 5,
80
+
81
+ prevIndex: 0,
82
+
83
+ crntIndex: 0,
84
+
85
+ };
86
+
87
+ nextImage(states);
88
+
85
- setInterval(nextImage, 1000 * 1);
89
+ setInterval(() => nextImage(states), 1000 * 1, true);
86
90
 
87
91
 
88
92
 
89
93
  // 次のイメージに切り替えます
90
94
 
91
- function nextImage() {
95
+ function nextImage(states) {
96
+
97
+ let { url, imageContainer, imageTemaplate, imageNum, prevIndex, crntIndex } = states;
92
98
 
93
99
  let images = imageContainer.children;
94
100
 
95
- let isConainerFulled = images.length == urls.length;
101
+ let isConainerFulled = (images.length == imageNum);
96
102
 
97
103
 
98
104
 
@@ -100,9 +106,9 @@
100
106
 
101
107
  if (!isConainerFulled) {
102
108
 
103
- let newImage = imageTemplate.cloneNode(true);
109
+ let newImage = imageTemaplate.cloneNode(true);
104
110
 
105
- newImage.src = newImage.alt = urls[crntIndex];
111
+ newImage.src = newImage.alt = (url + crntIndex);
106
112
 
107
113
  newImage.classList.add(noneDisplayClass);
108
114
 
@@ -122,9 +128,9 @@
122
128
 
123
129
  // 画像のインデックスを更新します
124
130
 
125
- prevIndex = crntIndex;
131
+ states.prevIndex = crntIndex;
126
132
 
127
- crntIndex = ((crntIndex + 1) == urls.length) ? 0 : (crntIndex + 1);
133
+ states.crntIndex = ((crntIndex + 1) == states.imageNum) ? 0 : (crntIndex + 1);
128
134
 
129
135
  }
130
136
 

5

コードを追記しました

2018/11/02 04:51

投稿

退会済みユーザー
test CHANGED
@@ -13,3 +13,129 @@
13
13
 
14
14
 
15
15
  あとは、最初だけ要素を追加していき、あとは表示/非表示を切り替えるとか。
16
+
17
+ ```javascript
18
+
19
+ <!doctype html>
20
+
21
+ <html>
22
+
23
+
24
+
25
+ <head>
26
+
27
+ <meta charset="UTF-8">
28
+
29
+ <style>
30
+
31
+ .none { display: none; }
32
+
33
+ </style>
34
+
35
+ </head>
36
+
37
+
38
+
39
+ <body>
40
+
41
+ <div id="imageContainer">
42
+
43
+ <!-- img要素のテンプレート -->
44
+
45
+ <img id="" src="" alt="imageTemplate">
46
+
47
+ </div>
48
+
49
+ <script type="text/javascript" language="javascript">
50
+
51
+ (function () {
52
+
53
+ let urls = [
54
+
55
+ "https://3.bp.blogspot.com/-Ncn2Gj8Aq9k/WwJZjGt-FBI/AAAAAAABMF0/5Uco6MFSragyb_xcDgrfuUFZMfx9diW2gCLcBGAs/s180-c/bird_okameinkogray.png",
56
+
57
+ "https://2.bp.blogspot.com/-ZGlQ838OJn4/WwJZiNUEDdI/AAAAAAABMFw/zj44flVO6aEotsTfW5R5_uPafKXbC1VzQCLcBGAs/s180-c/bird_kibitaki.png",
58
+
59
+ "https://3.bp.blogspot.com/-5wy0haI_pwk/WvQG_WkJifI/AAAAAAABL3c/qb7j7qZQCowYW1rKEAXMj08VY5ngw7sEQCLcBGAs/s180-c/bird_oomichibashiri_roadrunner.png",
60
+
61
+ ];
62
+
63
+ let imageContainer = document.getElementById('imageContainer');
64
+
65
+ let imageTemplate = imageContainer.children[0];
66
+
67
+ let noneDisplayClass = 'none';
68
+
69
+
70
+
71
+ // img要素のテンプレートを削除します
72
+
73
+ imageTemplate.remove();
74
+
75
+
76
+
77
+ // 繰り返し処理を開始します
78
+
79
+ let prevIndex;
80
+
81
+ let crntIndex;
82
+
83
+ crntIndex = prevIndex = 0;
84
+
85
+ setInterval(nextImage, 1000 * 1);
86
+
87
+
88
+
89
+ // 次のイメージに切り替えます
90
+
91
+ function nextImage() {
92
+
93
+ let images = imageContainer.children;
94
+
95
+ let isConainerFulled = images.length == urls.length;
96
+
97
+
98
+
99
+ // 次の画像を非表示で配置します
100
+
101
+ if (!isConainerFulled) {
102
+
103
+ let newImage = imageTemplate.cloneNode(true);
104
+
105
+ newImage.src = newImage.alt = urls[crntIndex];
106
+
107
+ newImage.classList.add(noneDisplayClass);
108
+
109
+ imageContainer.appendChild(newImage);
110
+
111
+ }
112
+
113
+
114
+
115
+ // 画像を切り替えます
116
+
117
+ images[prevIndex].classList.add(noneDisplayClass);
118
+
119
+ images[crntIndex].classList.remove(noneDisplayClass);
120
+
121
+
122
+
123
+ // 画像のインデックスを更新します
124
+
125
+ prevIndex = crntIndex;
126
+
127
+ crntIndex = ((crntIndex + 1) == urls.length) ? 0 : (crntIndex + 1);
128
+
129
+ }
130
+
131
+ }());
132
+
133
+ </script>
134
+
135
+ </body>
136
+
137
+
138
+
139
+ </html>
140
+
141
+ ```

4

微修正

2018/11/02 04:10

投稿

退会済みユーザー
test CHANGED
@@ -12,4 +12,4 @@
12
12
 
13
13
 
14
14
 
15
- もしくは、あらかじめ読み込んでおき、要素の表示/非表示を切り替えるとか。
15
+ あとは、最初だけ要素を追加していき、あとは表示/非表示を切り替えるとか。

3

追記

2018/11/02 02:58

投稿

退会済みユーザー
test CHANGED
@@ -1,6 +1,6 @@
1
- 参考サイトのDEMOに次のような記述がありましたが、このように背景のポジションをずらす方法を取られては？
1
+ あらかじめ合体させた画像を背景に指定し、そのポジションをずらす方法を取られては？
2
2
 
3
- もしくは、あらかじめ読み込んでおくとか。
3
+ 参考サイトのDEMOにそのような記述がありました。
4
4
 
5
5
 
6
6
 
@@ -9,3 +9,7 @@
9
9
  $("#animateField").children("p").css("background-position", -120*i + "px");
10
10
 
11
11
  ```
12
+
13
+
14
+
15
+ もしくは、あらかじめ読み込んでおき、要素の表示/非表示を切り替えるとか。

2

微修正

2018/11/02 02:56

投稿

退会済みユーザー
test CHANGED
File without changes

1

微修正

2018/11/02 02:15

投稿

退会済みユーザー
test CHANGED
@@ -1,4 +1,6 @@
1
1
  参考サイトのDEMOに次のような記述がありましたが、このように背景のポジションをずらす方法を取られては？
2
+
3
+ もしくは、あらかじめ読み込んでおくとか。
2
4
 
3
5
 
4
6