teratail
回答率
85.47%
質問するログイン新規登録
トップに関する質問Javascriptの関数について

編集履歴

質問編集履歴

3

2020/02/04 00:54

投稿

mi...
mi...

スコア20

test CHANGED
File without changes
test CHANGED
@@ -1,154 +1,6 @@
1
- 使い方の勉強不足で配慮にかけてしまい申し訳ございません。
2
-
3
- コードを書き直しましたのでよろしくお願いいたします。
4
-
5
-
6
-
7
1
  Javascript初心者です。
8
2
 
9
- HPを作成していて、
10
-
11
- 画像が一定間隔で切り替わるようにJavascriptで関数を作成し、
12
-
13
- それをHTMLに組み込んで使用してみました。
14
-
15
- 最初の一箇所の動作はうまくいったのですが、
16
-
17
- その関数をコピーして合計３箇所に使用したいのですがうまくいきません。
18
-
19
- いったいどのようにすれば一度作った関数を使いまわすことができるのでしょうか？
20
-
21
-
22
-
23
- 最初のHTMLとJavascriptです。
24
-
25
- ```HTML
26
-
27
- <div>
28
-
29
- 　　<img id="food" src="img0.jpg" width="100%"　height="auto">
30
-
31
- </div>
32
-
33
- ```
34
-
35
-
36
-
37
- ```Javascript
38
-
39
- var pics_src = new Array("img1.jpg","img2.jpg","img3.jpg");
40
-
41
- var num = -1;
42
-
43
-
44
-
45
- slideshow_timer();
46
-
47
-
48
-
49
- function slideshow_timer(){
50
-
51
- if (num == 2){
52
-
53
- num = 0;
54
-
55
- }
56
-
57
- else {
58
-
59
- num ++;
60
-
61
- }
62
-
63
- document.getElementById("food").src=pics_src[num];
64
-
65
- setTimeout("slideshow_timer()",3000);
66
-
67
- }
68
-
69
- ```
70
-
71
-
72
-
73
-
74
-
75
-
76
-
77
- ２つ目のHTMLコード
78
-
79
- ```HTML
80
-
81
- <div>
82
-
83
- 　　<img id="sweets" src="img0-0.jpg" width="100%"　height="auto">
84
-
85
- </div>
86
-
87
- ```
88
-
89
-
90
-
91
-
92
-
93
- ２つ目のスライド（Javascript）
94
-
95
- ```Javascript
96
-
97
- var pics1_src = new Array("img1-1.jpg","img2-1.jpg","img1.jpg");
98
-
99
- var num1 = -1;
100
-
101
-
102
-
103
- slideshow_timer();
104
-
105
-
106
-
107
- function slideshow_timer(){
108
-
109
- if (num1 == 2){
110
-
111
- num1 = 0;
112
-
113
- }
114
-
115
- else {
116
-
117
- num1 ++;
118
-
119
- }
120
-
121
- document.getElementById("sweets").src=pics1_src[num1];
122
-
123
- setTimeout("slideshow_timer()",3000);
124
-
125
- }
126
-
127
- ```
128
-
129
-
130
-
131
-
132
-
133
- 上記のコードの変数の部分を新しいものに変えて、
134
-
135
- 配列の中の画像も変更してコピーアンドペーストをしたのですが、
136
-
137
- 全く動作しませんでした。
138
-
139
- 何かアドバイスよろしくお願いいたします。
140
-
141
-
142
-
143
-
144
-
145
-
146
-
147
- 追記させていただきます。
148
-
149
-
150
-
151
- 関数の作り自体は同じで、
3
+ 画像をスライドさせる関数を作りは同じで、
152
4
 
153
5
  変数と関数の名前を違うものに変えて実行してみると、
154
6
 
@@ -156,7 +8,7 @@
156
8
 
157
9
  使用方法はないのでしょうか？
158
10
 
159
-
11
+ アドバイスよろしくお願いします。
160
12
 
161
13
 
162
14
 

2

自分で考えてやってみましたがもっといい方法はないのでしょうか？

2020/02/04 00:54

投稿

mi...
mi...

スコア20

test CHANGED
File without changes
test CHANGED
@@ -137,3 +137,143 @@
137
137
  全く動作しませんでした。
138
138
 
139
139
  何かアドバイスよろしくお願いいたします。
140
+
141
+
142
+
143
+
144
+
145
+
146
+
147
+ 追記させていただきます。
148
+
149
+
150
+
151
+ 関数の作り自体は同じで、
152
+
153
+ 変数と関数の名前を違うものに変えて実行してみると、
154
+
155
+ 動作しましたが、もっと簡潔に使い回せるような関数の書き方や、
156
+
157
+ 使用方法はないのでしょうか？
158
+
159
+
160
+
161
+
162
+
163
+ ```Javascript
164
+
165
+
166
+
167
+
168
+
169
+ //スライドA
170
+
171
+ var pics_src1 = new Array("img1.jpg","img2.jpg");
172
+
173
+ var num1 = -1;
174
+
175
+
176
+
177
+ slideshow_timer1();
178
+
179
+
180
+
181
+ function slideshow_timer1(){
182
+
183
+ if (num1 == 1){
184
+
185
+ num1 = 0;
186
+
187
+ }
188
+
189
+ else {
190
+
191
+ num1 ++;
192
+
193
+ }
194
+
195
+ document.getElementById("A").src=pics_src1[num1];
196
+
197
+ setTimeout("slideshow_timer1()",3000);
198
+
199
+ }
200
+
201
+
202
+
203
+
204
+
205
+
206
+
207
+ //スライドB
208
+
209
+ var pics_src2 = new Array("img3.jpg","img4.jpg");
210
+
211
+ var num2 = -1;
212
+
213
+
214
+
215
+ slideshow_timer2();
216
+
217
+
218
+
219
+ function slideshow_timer2(){
220
+
221
+ if (num2 == 1){
222
+
223
+ num2 = 0;
224
+
225
+ }
226
+
227
+ else {
228
+
229
+ num2 ++;
230
+
231
+ }
232
+
233
+ document.getElementById("B").src=pics_src2[num2];
234
+
235
+ setTimeout("slideshow_timer2()",3000);
236
+
237
+ }
238
+
239
+
240
+
241
+
242
+
243
+
244
+
245
+ //スライドC
246
+
247
+ var pics_src3 = new Array("img5.jpg","img6.jpg");
248
+
249
+ var num3 = -1;
250
+
251
+
252
+
253
+ slideshow_timer3();
254
+
255
+
256
+
257
+ function slideshow_timer3(){
258
+
259
+ if (num3 == 1){
260
+
261
+ num3 = 0;
262
+
263
+ }
264
+
265
+ else {
266
+
267
+ num3 ++;
268
+
269
+ }
270
+
271
+ document.getElementById("C").src=pics_src3[num];
272
+
273
+ setTimeout("slideshow_timer3()",3000);
274
+
275
+ }
276
+
277
+
278
+
279
+ ```

1

コードブロック機能を使って見易く変更いたしました。よろしくお願いいたします。

2020/02/03 23:35

投稿

mi...
mi...

スコア20

test CHANGED
File without changes
test CHANGED
@@ -1,3 +1,9 @@
1
+ 使い方の勉強不足で配慮にかけてしまい申し訳ございません。
2
+
3
+ コードを書き直しましたのでよろしくお願いいたします。
4
+
5
+
6
+
1
7
  Javascript初心者です。
2
8
 
3
9
  HPを作成していて、
@@ -14,9 +20,9 @@
14
20
 
15
21
 
16
22
 
17
- <コード>
23
+ 最初のHTMLとJavascriptです。
18
24
 
19
- //HTMLコード
25
+ ```HTML
20
26
 
21
27
  <div>
22
28
 
@@ -24,9 +30,11 @@
24
30
 
25
31
  </div>
26
32
 
33
+ ```
27
34
 
28
35
 
36
+
29
- //最初のスライド（Javascript）
37
+ ```Javascript
30
38
 
31
39
  var pics_src = new Array("img1.jpg","img2.jpg","img3.jpg");
32
40
 
@@ -58,11 +66,17 @@
58
66
 
59
67
  }
60
68
 
69
+ ```
61
70
 
62
71
 
63
72
 
64
73
 
74
+
75
+
76
+
65
- //２つ目のHTMLコード
77
+ ２つ目のHTMLコード
78
+
79
+ ```HTML
66
80
 
67
81
  <div>
68
82
 
@@ -70,9 +84,15 @@
70
84
 
71
85
  </div>
72
86
 
87
+ ```
73
88
 
74
89
 
90
+
91
+
92
+
75
- //２つ目のスライド（Javascript）
93
+ ２つ目のスライド（Javascript）
94
+
95
+ ```Javascript
76
96
 
77
97
  var pics1_src = new Array("img1-1.jpg","img2-1.jpg","img1.jpg");
78
98
 
@@ -104,6 +124,10 @@
104
124
 
105
125
  }
106
126
 
127
+ ```
128
+
129
+
130
+
107
131
 
108
132
 
109
133
  上記のコードの変数の部分を新しいものに変えて、