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

編集履歴

回答編集履歴

6

コードなおしました

2018/11/02 04:51

投稿

退会済みユーザー
answer CHANGED
@@ -6,6 +6,7 @@
6
6
  ```
7
7
 
8
8
  あとは、最初だけ要素を追加していき、あとは表示/非表示を切り替えるとか。
9
+ (※コードの一部は他の回答を参考にしてます)
9
10
  ```javascript
10
11
  <!doctype html>
11
12
  <html>
@@ -20,37 +21,39 @@
20
21
  <body>
21
22
  <div id="imageContainer">
22
23
  <!-- img要素のテンプレート -->
23
- <img id="" src="" alt="imageTemplate">
24
+ <img id="" src="https://placehold.jp/ff0000/00ffff/100x100.png?text=0" alt="error">
24
25
  </div>
25
26
  <script type="text/javascript" language="javascript">
26
27
  (function () {
27
- let urls = [
28
+ // 非表示クラスの名前
28
- "https://3.bp.blogspot.com/-Ncn2Gj8Aq9k/WwJZjGt-FBI/AAAAAAABMF0/5Uco6MFSragyb_xcDgrfuUFZMfx9diW2gCLcBGAs/s180-c/bird_okameinkogray.png",
29
- "https://2.bp.blogspot.com/-ZGlQ838OJn4/WwJZiNUEDdI/AAAAAAABMFw/zj44flVO6aEotsTfW5R5_uPafKXbC1VzQCLcBGAs/s180-c/bird_kibitaki.png",
30
- "https://3.bp.blogspot.com/-5wy0haI_pwk/WvQG_WkJifI/AAAAAAABL3c/qb7j7qZQCowYW1rKEAXMj08VY5ngw7sEQCLcBGAs/s180-c/bird_oomichibashiri_roadrunner.png",
31
- ];
32
- let imageContainer = document.getElementById('imageContainer');
33
- let imageTemplate = imageContainer.children[0];
34
- let noneDisplayClass = 'none';
29
+ const noneDisplayClass = 'none';
35
30
 
36
31
  // img要素のテンプレートを削除します
32
+ let imageTemaplate = document.querySelector('#imageContainer > img');
37
- imageTemplate.remove();
33
+ imageTemaplate.remove();
38
34
 
39
35
  // 繰り返し処理を開始します
36
+ let states = {
37
+ url: imageTemaplate.src.replace(/=\d/, '='),
38
+ imageContainer: document.getElementById('imageContainer'),
39
+ imageTemaplate,
40
+ imageNum: 5,
40
- let prevIndex;
41
+ prevIndex: 0,
41
- let crntIndex;
42
+ crntIndex: 0,
43
+ };
42
- crntIndex = prevIndex = 0;
44
+ nextImage(states);
43
- setInterval(nextImage, 1000 * 1);
45
+ setInterval(() => nextImage(states), 1000 * 1, true);
44
46
 
45
47
  // 次のイメージに切り替えます
46
- function nextImage() {
48
+ function nextImage(states) {
49
+ let { url, imageContainer, imageTemaplate, imageNum, prevIndex, crntIndex } = states;
47
50
  let images = imageContainer.children;
48
- let isConainerFulled = images.length == urls.length;
51
+ let isConainerFulled = (images.length == imageNum);
49
52
 
50
53
  // 次の画像を非表示で配置します
51
54
  if (!isConainerFulled) {
52
- let newImage = imageTemplate.cloneNode(true);
55
+ let newImage = imageTemaplate.cloneNode(true);
53
- newImage.src = newImage.alt = urls[crntIndex];
56
+ newImage.src = newImage.alt = (url + crntIndex);
54
57
  newImage.classList.add(noneDisplayClass);
55
58
  imageContainer.appendChild(newImage);
56
59
  }
@@ -60,8 +63,8 @@
60
63
  images[crntIndex].classList.remove(noneDisplayClass);
61
64
 
62
65
  // 画像のインデックスを更新します
63
- prevIndex = crntIndex;
66
+ states.prevIndex = crntIndex;
64
- crntIndex = ((crntIndex + 1) == urls.length) ? 0 : (crntIndex + 1);
67
+ states.crntIndex = ((crntIndex + 1) == states.imageNum) ? 0 : (crntIndex + 1);
65
68
  }
66
69
  }());
67
70
  </script>

5

コードを追記しました

2018/11/02 04:51

投稿

退会済みユーザー
answer CHANGED
@@ -5,4 +5,67 @@
5
5
  $("#animateField").children("p").css("background-position", -120*i + "px");
6
6
  ```
7
7
 
8
- あとは、最初だけ要素を追加していき、あとは表示/非表示を切り替えるとか。
8
+ あとは、最初だけ要素を追加していき、あとは表示/非表示を切り替えるとか。
9
+ ```javascript
10
+ <!doctype html>
11
+ <html>
12
+
13
+ <head>
14
+ <meta charset="UTF-8">
15
+ <style>
16
+ .none { display: none; }
17
+ </style>
18
+ </head>
19
+
20
+ <body>
21
+ <div id="imageContainer">
22
+ <!-- img要素のテンプレート -->
23
+ <img id="" src="" alt="imageTemplate">
24
+ </div>
25
+ <script type="text/javascript" language="javascript">
26
+ (function () {
27
+ let urls = [
28
+ "https://3.bp.blogspot.com/-Ncn2Gj8Aq9k/WwJZjGt-FBI/AAAAAAABMF0/5Uco6MFSragyb_xcDgrfuUFZMfx9diW2gCLcBGAs/s180-c/bird_okameinkogray.png",
29
+ "https://2.bp.blogspot.com/-ZGlQ838OJn4/WwJZiNUEDdI/AAAAAAABMFw/zj44flVO6aEotsTfW5R5_uPafKXbC1VzQCLcBGAs/s180-c/bird_kibitaki.png",
30
+ "https://3.bp.blogspot.com/-5wy0haI_pwk/WvQG_WkJifI/AAAAAAABL3c/qb7j7qZQCowYW1rKEAXMj08VY5ngw7sEQCLcBGAs/s180-c/bird_oomichibashiri_roadrunner.png",
31
+ ];
32
+ let imageContainer = document.getElementById('imageContainer');
33
+ let imageTemplate = imageContainer.children[0];
34
+ let noneDisplayClass = 'none';
35
+
36
+ // img要素のテンプレートを削除します
37
+ imageTemplate.remove();
38
+
39
+ // 繰り返し処理を開始します
40
+ let prevIndex;
41
+ let crntIndex;
42
+ crntIndex = prevIndex = 0;
43
+ setInterval(nextImage, 1000 * 1);
44
+
45
+ // 次のイメージに切り替えます
46
+ function nextImage() {
47
+ let images = imageContainer.children;
48
+ let isConainerFulled = images.length == urls.length;
49
+
50
+ // 次の画像を非表示で配置します
51
+ if (!isConainerFulled) {
52
+ let newImage = imageTemplate.cloneNode(true);
53
+ newImage.src = newImage.alt = urls[crntIndex];
54
+ newImage.classList.add(noneDisplayClass);
55
+ imageContainer.appendChild(newImage);
56
+ }
57
+
58
+ // 画像を切り替えます
59
+ images[prevIndex].classList.add(noneDisplayClass);
60
+ images[crntIndex].classList.remove(noneDisplayClass);
61
+
62
+ // 画像のインデックスを更新します
63
+ prevIndex = crntIndex;
64
+ crntIndex = ((crntIndex + 1) == urls.length) ? 0 : (crntIndex + 1);
65
+ }
66
+ }());
67
+ </script>
68
+ </body>
69
+
70
+ </html>
71
+ ```

4

微修正

2018/11/02 04:10

投稿

退会済みユーザー
answer CHANGED
@@ -5,4 +5,4 @@
5
5
  $("#animateField").children("p").css("background-position", -120*i + "px");
6
6
  ```
7
7
 
8
- もしくは、あらかじめ読み込んでおき、要素の表示/非表示を切り替えるとか。
8
+ あとは、最初だけ要素を追加していき、あとは表示/非表示を切り替えるとか。

3

追記

2018/11/02 02:58

投稿

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

2

微修正

2018/11/02 02:56

投稿

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

1

微修正

2018/11/02 02:15

投稿

退会済みユーザー
answer CHANGED
@@ -1,4 +1,5 @@
1
1
  参考サイトのDEMOに次のような記述がありましたが、このように背景のポジションをずらす方法を取られては？
2
+ もしくは、あらかじめ読み込んでおくとか。
2
3
 
3
4
  ```javascript
4
5
  $("#animateField").children("p").css("background-position", -120*i + "px");