teratail
回答率
85.35%
teratail header banner
teratail header banner
質問するログイン新規登録
トップに関する質問JavaScriptのfunction(複数の画像スライドショー)が機能しない。

編集履歴

質問編集履歴

2

自分で作成したソースコードを追加

2022/01/03 07:16

投稿

K.YUMA
K.YUMA

スコア12

test CHANGED
File without changes
test CHANGED
@@ -12,20 +12,16 @@
12
12
 
13
13
 
14
14
 
15
-
16
-
17
15
  ここに質問の内容を詳しく書いてください。
18
16
 
19
17
  JavaScriptのFunctionを作成して、一つの画像自動切り替えできました。
20
18
 
21
- 複数のFunctionを作成すると、IMGタグに複数のJavaScriptのFunctionが作用して、動作しません。
19
+ 複数のFunction（３つ）を作成すると、IMGタグに複数のJavaScriptのFunctionが作用して、動作しません。
22
20
 
23
21
  ローカル設定できるように、idやclassの設定も試行しました。
24
22
 
25
23
 
26
24
 
27
-
28
-
29
25
  ### 発生している問題・エラーメッセージ
30
26
 
31
27
  どうすれば、おなじTHML内において、複数のJavaScriptのfunctionを動作させられるのでしょうか。
@@ -36,15 +32,205 @@
36
32
 
37
33
  ```
38
34
 
39
-
40
-
41
35
  ### 該当のソースコード
42
36
 
43
-
44
-
45
37
  ```
46
38
 
39
+ 【【--------自分で作成したソースコード--------】】
40
+
41
+
42
+
43
+ 【--------ソースコード内訳①：Index_test.htmlのファイル--------】
44
+
45
+ <!DOCTYPE html>
46
+
47
+ <html>
48
+
49
+ <head>
50
+
51
+ <meta charset="UTF-8">
52
+
53
+ <meta name="viewport" content="width=device-width">
54
+
55
+
56
+
57
+ <title>プログラミング練習</title>
58
+
59
+ <link rel="stylesheet" href="style_test.css">
60
+
61
+ </head>
62
+
63
+ <body>
64
+
65
+ <h1>JS プログラミング練習：複数の画像スライドショー</h1>
66
+
67
+ <div id="CompanyA">
68
+
69
+ <img src="CompanyA/imageA-1.jpg" id="slide_imgA" class="slider">
70
+
71
+ <script type="text/javascript">/*JS 画像自動スライドショーCompanyA*/
72
+
73
+ const img_srcA = ["imageA-1.jpg", "imageA-2.jpg", "imageA-3.jpg"];
74
+
75
+ let num = -1;
76
+
77
+ function slide_timeA() {
78
+
79
+ if (num === 2) {
80
+
81
+ num = 0;
82
+
83
+ }
84
+
85
+ else {
86
+
87
+ num++;
88
+
89
+ }
90
+
91
+ document.getElementById("slide_imgA").src ="imagesA/" + img_srcA[num];
92
+
93
+ }
94
+
95
+ setInterval(slide_timeA, 1500);
96
+
97
+ </script>
98
+
99
+ </div>
100
+
101
+
102
+
103
+ <div id="CompanyB">
104
+
105
+ <img src="CompanyB/imageB-1.jpg" id="slide_imgB" class="slider">
106
+
107
+ <script type="text/javascript">/*JS 画像自動スライドショーCompanyB*/
108
+
109
+ const img_srcB = ["imageB-1.jpg", "imageB-2.jpg", "imageB-3.jpg"];
110
+
111
+ let num = -1;
112
+
113
+ function slide_timeB() {
114
+
115
+ if (num === 2) {
116
+
117
+ num = 0;
118
+
119
+ }
120
+
121
+ else {
122
+
123
+ num++;
124
+
125
+ }
126
+
127
+ document.getElementById("slide_imgB").src ="imagesB/" + img_srcB[num];
128
+
129
+ }
130
+
131
+ setInterval(slide_timeB, 1500);
132
+
133
+ </script>
134
+
135
+ </div>
136
+
137
+
138
+
139
+ <div id="CompanyC">
140
+
141
+ <img src="CompanyC/imageC-1.jpg" id="slide_imgC" class="slider">
142
+
143
+ <script type="text/javascript">/*JS 画像自動スライドショーCompanyC*/
144
+
145
+ const img_srcC = ["imageC-1.jpg", "imageC-2.jpg", "imageC-3.jpg"];
146
+
147
+ let num = -1;
148
+
149
+ function slide_timeC() {
150
+
151
+ if (num === 2) {
152
+
153
+ num = 0;
154
+
155
+ }
156
+
157
+ else {
158
+
159
+ num++;
160
+
161
+ }
162
+
163
+ document.getElementById("slide_imgC").src ="imagesC/" + img_srcC[num];
164
+
165
+ }
166
+
167
+ setInterval(slide_timeC, 1500);
168
+
169
+ </script>
170
+
171
+ </div>
172
+
173
+ </body>
174
+
175
+ </html>
176
+
177
+
178
+
179
+ 【--------ソースコード内訳②：style_test.cssのファイルのソースコード--------】
180
+
181
+ @import url(sanitize.css)
182
+
183
+ @import url('https://fonts.googleapis.com/css2?family=Sriracha&display=swap');
184
+
185
+
186
+
187
+ body {
188
+
189
+ background-color: rgb(217, 243, 197);
190
+
191
+ padding: 10px;
192
+
193
+ font-size: 16px;
194
+
47
- ソースコード 【引用したサイトのリンクを末尾に表示】
195
+ color: rgb(10, 64, 241);
196
+
197
+ }
198
+
199
+
200
+
201
+ header {
202
+
203
+ background-color: rgb(248, 248, 246);
204
+
205
+ padding: 10px;
206
+
207
+ color: rgb(10, 34, 245);
208
+
209
+ }
210
+
211
+
212
+
213
+ /*JS 画像自動スライドショーのクラス設定*/
214
+
215
+ .slider {
216
+
217
+ width: 600px;
218
+
219
+ height: 338px;
220
+
221
+ margin: 5px;
222
+
223
+ }
224
+
225
+
226
+
227
+ 【【--------自分で作成したソースコードここまで--------】】
228
+
229
+
230
+
231
+
232
+
233
+ 【【--------他のサイトから引用したソースコード--------】】
48
234
 
49
235
  【JavaScript】
50
236
 
@@ -126,11 +312,9 @@
126
312
 
127
313
 
128
314
 
129
-
130
-
131
315
  ```
132
316
 
133
- 参考サイト
317
+ 参考したサイト
134
318
 
135
319
  「簡単にできる！ JavaScriptでスライドショーを作る方法」ウェブカツより引用
136
320
 

1

スペルミス修正

2022/01/03 07:16

投稿

K.YUMA
K.YUMA

スコア12

test CHANGED
@@ -1 +1 @@
1
- JavaScriptのfuncition(複数の画像スライドショー)が機能しない。
1
+ JavaScriptのfunction(複数の画像スライドショー)が機能しない。
test CHANGED
@@ -28,7 +28,7 @@
28
28
 
29
29
  ### 発生している問題・エラーメッセージ
30
30
 
31
- どうすれば、おなじTHML内において、複数のJavaScriptのfuncitionを動作させられるのでしょうか。
31
+ どうすれば、おなじTHML内において、複数のJavaScriptのfunctionを動作させられるのでしょうか。
32
32
 
33
33
  ```
34
34
 
@@ -56,7 +56,7 @@
56
56
 
57
57
 
58
58
 
59
- function slide_time() { /*☚このfuncitionをslide time1、2…のようにサムネイル窓枠の数だけ作りたい*/
59
+ function slide_time() { /*☚このfunctionをslide time1、2…のようにサムネイル窓枠の数だけ作りたい*/
60
60
 
61
61
  if (num === 2) {
62
62
 
@@ -142,12 +142,8 @@
142
142
 
143
143
 
144
144
 
145
- JavaScriptのfuncition関数をlocal適用できるように、let、idタグ、classタグを試行した。
145
+ JavaScriptのfunction関数をlocal適用できるように、let、idタグ、classタグを試行した。
146
146
 
147
147
 
148
148
 
149
149
  ### 補足情報（FW/ツールのバージョンなど）
150
-
151
-
152
-
153
- ここにより詳細な情報を記載してください。