質問編集履歴
2
自分で作成したソースコードを追加
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -5,23 +5,116 @@
|
|
|
5
5
|
HTMLの画面イメージ：YouTubeのようにいくつものサムネイル画像がある。
|
|
6
6
|
それぞれの画像を自動切り替えさせたい。
|
|
7
7
|
|
|
8
|
-
|
|
9
8
|
ここに質問の内容を詳しく書いてください。
|
|
10
9
|
JavaScriptのFunctionを作成して、一つの画像自動切り替えできました。
|
|
11
|
-
複数のFunctionを作成すると、IMGタグに複数のJavaScriptのFunctionが作用して、動作しません。
|
|
10
|
+
複数のFunction（３つ）を作成すると、IMGタグに複数のJavaScriptのFunctionが作用して、動作しません。
|
|
12
11
|
ローカル設定できるように、idやclassの設定も試行しました。
|
|
13
12
|
|
|
14
|
-
|
|
15
13
|
### 発生している問題・エラーメッセージ
|
|
16
14
|
どうすれば、おなじTHML内において、複数のJavaScriptのfunctionを動作させられるのでしょうか。
|
|
17
15
|
```
|
|
18
16
|
エラーメッセージ
|
|
19
17
|
```
|
|
20
|
-
|
|
21
18
|
### 該当のソースコード
|
|
19
|
+
```
|
|
20
|
+
【【--------自分で作成したソースコード--------】】
|
|
22
21
|
|
|
22
|
+
【--------ソースコード内訳①：Index_test.htmlのファイル--------】
|
|
23
|
+
<!DOCTYPE html>
|
|
24
|
+
<html>
|
|
25
|
+
<head>
|
|
26
|
+
<meta charset="UTF-8">
|
|
27
|
+
<meta name="viewport" content="width=device-width">
|
|
28
|
+
|
|
29
|
+
<title>プログラミング練習</title>
|
|
30
|
+
<link rel="stylesheet" href="style_test.css">
|
|
31
|
+
</head>
|
|
32
|
+
<body>
|
|
33
|
+
<h1>JS プログラミング練習：複数の画像スライドショー</h1>
|
|
34
|
+
<div id="CompanyA">
|
|
35
|
+
<img src="CompanyA/imageA-1.jpg" id="slide_imgA" class="slider">
|
|
36
|
+
<script type="text/javascript">/*JS 画像自動スライドショーCompanyA*/
|
|
37
|
+
const img_srcA = ["imageA-1.jpg", "imageA-2.jpg", "imageA-3.jpg"];
|
|
38
|
+
let num = -1;
|
|
39
|
+
function slide_timeA() {
|
|
40
|
+
if (num === 2) {
|
|
41
|
+
num = 0;
|
|
42
|
+
}
|
|
23
|
-
|
|
43
|
+
else {
|
|
44
|
+
num++;
|
|
45
|
+
}
|
|
46
|
+
document.getElementById("slide_imgA").src ="imagesA/" + img_srcA[num];
|
|
47
|
+
}
|
|
48
|
+
setInterval(slide_timeA, 1500);
|
|
49
|
+
</script>
|
|
50
|
+
</div>
|
|
51
|
+
|
|
52
|
+
<div id="CompanyB">
|
|
53
|
+
<img src="CompanyB/imageB-1.jpg" id="slide_imgB" class="slider">
|
|
54
|
+
<script type="text/javascript">/*JS 画像自動スライドショーCompanyB*/
|
|
55
|
+
const img_srcB = ["imageB-1.jpg", "imageB-2.jpg", "imageB-3.jpg"];
|
|
56
|
+
let num = -1;
|
|
57
|
+
function slide_timeB() {
|
|
58
|
+
if (num === 2) {
|
|
59
|
+
num = 0;
|
|
60
|
+
}
|
|
61
|
+
else {
|
|
62
|
+
num++;
|
|
63
|
+
}
|
|
64
|
+
document.getElementById("slide_imgB").src ="imagesB/" + img_srcB[num];
|
|
65
|
+
}
|
|
66
|
+
setInterval(slide_timeB, 1500);
|
|
67
|
+
</script>
|
|
68
|
+
</div>
|
|
69
|
+
|
|
70
|
+
<div id="CompanyC">
|
|
71
|
+
<img src="CompanyC/imageC-1.jpg" id="slide_imgC" class="slider">
|
|
72
|
+
<script type="text/javascript">/*JS 画像自動スライドショーCompanyC*/
|
|
73
|
+
const img_srcC = ["imageC-1.jpg", "imageC-2.jpg", "imageC-3.jpg"];
|
|
74
|
+
let num = -1;
|
|
75
|
+
function slide_timeC() {
|
|
76
|
+
if (num === 2) {
|
|
77
|
+
num = 0;
|
|
78
|
+
}
|
|
79
|
+
else {
|
|
80
|
+
num++;
|
|
81
|
+
}
|
|
82
|
+
document.getElementById("slide_imgC").src ="imagesC/" + img_srcC[num];
|
|
83
|
+
}
|
|
84
|
+
setInterval(slide_timeC, 1500);
|
|
85
|
+
</script>
|
|
86
|
+
</div>
|
|
87
|
+
</body>
|
|
88
|
+
</html>
|
|
89
|
+
|
|
90
|
+
【--------ソースコード内訳②：style_test.cssのファイルのソースコード--------】
|
|
91
|
+
@import url(sanitize.css)
|
|
92
|
+
@import url('https://fonts.googleapis.com/css2?family=Sriracha&display=swap');
|
|
93
|
+
|
|
94
|
+
body {
|
|
95
|
+
background-color: rgb(217, 243, 197);
|
|
96
|
+
padding: 10px;
|
|
97
|
+
font-size: 16px;
|
|
24
|
-
|
|
98
|
+
color: rgb(10, 64, 241);
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
header {
|
|
102
|
+
background-color: rgb(248, 248, 246);
|
|
103
|
+
padding: 10px;
|
|
104
|
+
color: rgb(10, 34, 245);
|
|
105
|
+
}
|
|
106
|
+
|
|
107
|
+
/*JS 画像自動スライドショーのクラス設定*/
|
|
108
|
+
.slider {
|
|
109
|
+
width: 600px;
|
|
110
|
+
height: 338px;
|
|
111
|
+
margin: 5px;
|
|
112
|
+
}
|
|
113
|
+
|
|
114
|
+
【【--------自分で作成したソースコードここまで--------】】
|
|
115
|
+
|
|
116
|
+
|
|
117
|
+
【【--------他のサイトから引用したソースコード--------】】
|
|
25
118
|
【JavaScript】
|
|
26
119
|
<script>
|
|
27
120
|
const img_src = ["img1.jpg", "img2.jpg", "img3.jpg"];
|
|
@@ -62,9 +155,8 @@
|
|
|
62
155
|
margin: 50px;
|
|
63
156
|
}
|
|
64
157
|
|
|
65
|
-
|
|
66
158
|
```
|
|
67
|
-
参考サイト
|
|
159
|
+
参考したサイト
|
|
68
160
|
「簡単にできる！ JavaScriptでスライドショーを作る方法」ウェブカツより引用
|
|
69
161
|
https://webukatu.com/wordpress/blog/7073/
|
|
70
162
|
|
1
スペルミス修正
title
CHANGED
|
@@ -1,1 +1,1 @@
|
|
|
1
|
-
JavaScriptの
|
|
1
|
+
JavaScriptのfunction(複数の画像スライドショー)が機能しない。
|
body
CHANGED
|
@@ -13,7 +13,7 @@
|
|
|
13
13
|
|
|
14
14
|
|
|
15
15
|
### 発生している問題・エラーメッセージ
|
|
16
|
-
どうすれば、おなじTHML内において、複数のJavaScriptの
|
|
16
|
+
どうすれば、おなじTHML内において、複数のJavaScriptのfunctionを動作させられるのでしょうか。
|
|
17
17
|
```
|
|
18
18
|
エラーメッセージ
|
|
19
19
|
```
|
|
@@ -27,7 +27,7 @@
|
|
|
27
27
|
const img_src = ["img1.jpg", "img2.jpg", "img3.jpg"];
|
|
28
28
|
let num = -1;
|
|
29
29
|
|
|
30
|
-
function slide_time() { /*☚この
|
|
30
|
+
function slide_time() { /*☚このfunctionをslide time1、2…のようにサムネイル窓枠の数だけ作りたい*/
|
|
31
31
|
if (num === 2) {
|
|
32
32
|
num = 0;
|
|
33
33
|
} else {
|
|
@@ -70,8 +70,6 @@
|
|
|
70
70
|
|
|
71
71
|
### 試したこと
|
|
72
72
|
|
|
73
|
-
JavaScriptの
|
|
73
|
+
JavaScriptのfunction関数をlocal適用できるように、let、idタグ、classタグを試行した。
|
|
74
74
|
|
|
75
|
-
### 補足情報（FW/ツールのバージョンなど）
|
|
75
|
+
### 補足情報（FW/ツールのバージョンなど）
|
|
76
|
-
|
|
77
|
-
ここにより詳細な情報を記載してください。
|