teratail
回答率
85.48%
質問するログイン新規登録
トップJavaScriptに関する質問🔰サイト制作勉強中　javascriptでwindowを開いた時に3秒ずつ4枚の背景が変わっていくものを作りたいです。

編集履歴

質問編集履歴

8

進捗があるため

2022/01/27 09:53

投稿

soramaru
soramaru

スコア25

test CHANGED
File without changes
test CHANGED
@@ -1,7 +1,5 @@
1
1
  トップ部分に1980×1280サイズの背景画像を変化させていきたいのですが。
2
- 何回か思考錯誤していますが、画像を表示するとこまでは理解して出来ています。
3
- しかし、javascriptで画像を切り替わるよう設定して試しています。
4
- とりあえず、一枚をfadein出来るようにしようと設定していますが出来ていません。
2
+ 一枚目がフェイド出来ますが、他3枚が反映されていません。
5
3
 
6
4
  やりたいことの例
7
5
  [リンク内容](url)https://linew.co.jp/
@@ -9,12 +7,10 @@
9
7
 
10
8
  具体的に、やりたい事としてWindows読み込み後、出現している背景を順にフェードアウト、次をフェードインさせる形で表現したいです。
11
9
 
12
- 現象として、画像が上にヘッダーがあり、画像が4枚並んでいるだけになっています。
10
+ 現象として、画像が上にヘッダーがあり、画像が4枚並んでいるいて、上一枚目だけフェイドしていいます。
13
11
  エラー表示はでていません。
14
12
  知識をお借りしたいです。
15
13
 
16
- 9から１４列目の部分です。
17
- 画像は３４から３９列目の部分です。
18
14
 
19
15
  ```ここに言語を入力
20
16
  コード
@@ -25,13 +21,28 @@
25
21
  <title>株式会社LiNew</title>
26
22
  <link rel="stylesheet" type="text/css" href="base.css">
27
23
  <link rel="stylesheet" type="text/css" href="">
24
+ <script
25
+ src="https://code.jquery.com/jquery-2.2.4.js"
26
+ integrity="sha256-iT6Q9iMJYuQiMWNd9lDyBUStIq/8PuOW33aOqmvFpqI="
28
- <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script>
27
+ crossorigin="anonymous"></script> <script>
28
+ (function(){
29
+ let interval =3000;
30
+ let fade_speed = 1000;
31
+ $(".nav-totoggle img").hide();
32
+ $(".nav-totoggle img:first").addClass("active").show();
29
33
 
30
- $('window').on ('load', function() {
34
+ let changeImage = function(){
31
- $('#nav-totoggle1').stop().fadeIn(3000);
35
+ let $active = $(".nav-totoggle img.active");
32
- });
36
+ let $next = $active.next(".nav-totoggle").length?$active.next(".nav-totoggle"):$(".nav-totoggle img:first");
33
37
 
38
+ $active.fadeOut(fade_speed).removeClass("active");
39
+ $next.fadeIn(fade_speed).addClass("active");
40
+ }
41
+
42
+
43
+ setInterval(changeImage,interval);
44
+ }());
34
- </script>
45
+ </script>
35
46
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
36
47
  </head>
37
48
  <body>
@@ -51,10 +62,10 @@
51
62
  </div>
52
63
  </div>
53
64
  <nav class="nav-totoggle">
54
- <li id=nav-totoggle1><img src="image/IMG_0218-4.jpeg"></li>
65
+ <img src="image/IMG_0218-4.jpeg">
55
- <li id=nav-totoggle2><img src="image/IMG_0224-1.jpeg"></li>
66
+ <img src="image/IMG_0224-1.jpeg">
56
- <li id=nav-totoggle3><img src="image/IMG_0256.jpeg"></li>
67
+ <img src="image/IMG_0256.jpeg">
57
- <li id=nav-totoggle4><img src="image/IMG_0258-1.jpeg"></li>
68
+ <img src="image/IMG_0258-1.jpeg">
58
69
  </nav>
59
70
 
60
71
  </body>
JavaScriptHTML

7

リンクと助言部分の変更

2022/01/27 06:47

投稿

soramaru
soramaru

スコア25

test CHANGED
@@ -1 +1 @@
1
- 🔰サイト制作勉強中　javascriptでwindowを開いた時に3ずつ4枚の背景が変わっていくものを作りたいです。
1
+ 🔰サイト制作勉強中　javascriptでwindowを開いた時に3秒ずつ4枚の背景が変わっていくものを作りたいです。
test CHANGED
@@ -2,6 +2,12 @@
2
2
  何回か思考錯誤していますが、画像を表示するとこまでは理解して出来ています。
3
3
  しかし、javascriptで画像を切り替わるよう設定して試しています。
4
4
  とりあえず、一枚をfadein出来るようにしようと設定していますが出来ていません。
5
+
6
+ やりたいことの例
7
+ [リンク内容](url)https://linew.co.jp/
8
+ 上記のトップ部分のようにしたいです。
9
+
10
+ 具体的に、やりたい事としてWindows読み込み後、出現している背景を順にフェードアウト、次をフェードインさせる形で表現したいです。
5
11
 
6
12
  現象として、画像が上にヘッダーがあり、画像が4枚並んでいるだけになっています。
7
13
  エラー表示はでていません。
@@ -22,7 +28,7 @@
22
28
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script>
23
29
 
24
30
  $('window').on ('load', function() {
25
- $('#nav-totoggle1').stop().fadein(3000);
31
+ $('#nav-totoggle1').stop().fadeIn(3000);
26
32
  });
27
33
 
28
34
  </script>
@@ -44,15 +50,16 @@
44
50
  </nav>
45
51
  </div>
46
52
  </div>
47
- <div class="nav-totoggle">
53
+ <nav class="nav-totoggle">
48
54
  <li id=nav-totoggle1><img src="image/IMG_0218-4.jpeg"></li>
49
55
  <li id=nav-totoggle2><img src="image/IMG_0224-1.jpeg"></li>
50
56
  <li id=nav-totoggle3><img src="image/IMG_0256.jpeg"></li>
51
57
  <li id=nav-totoggle4><img src="image/IMG_0258-1.jpeg"></li>
52
- </div>
58
+ </nav>
53
59
 
54
60
  </body>
55
61
  </html>
62
+
56
63
 
57
64
  以下CSS
58
65
 
JavaScriptHTML

6

助言ように変更

2022/01/27 06:20

投稿

soramaru
soramaru

スコア25

test CHANGED
File without changes
test CHANGED
@@ -22,8 +22,7 @@
22
22
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script>
23
23
 
24
24
  $('window').on ('load', function() {
25
- let element = document.getElementById('nav-totoggle1');
26
- $('nav-totoggle1').stop().fadein(3000);
25
+ $('#nav-totoggle1').stop().fadein(3000);
27
26
  });
28
27
 
29
28
  </script>
@@ -46,14 +45,15 @@
46
45
  </div>
47
46
  </div>
48
47
  <div class="nav-totoggle">
49
- <li class=nav-totoggle1><img src="image/IMG_0218-4.jpeg"></li>
48
+ <li id=nav-totoggle1><img src="image/IMG_0218-4.jpeg"></li>
50
- <li class=nav-totoggle2><img src="image/IMG_0224-1.jpeg"></li>
49
+ <li id=nav-totoggle2><img src="image/IMG_0224-1.jpeg"></li>
51
- <li class=nav-totoggle3><img src="image/IMG_0256.jpeg"></li>
50
+ <li id=nav-totoggle3><img src="image/IMG_0256.jpeg"></li>
52
- <li class=nav-totoggle4><img src="image/IMG_0258-1.jpeg"></li>
51
+ <li id=nav-totoggle4><img src="image/IMG_0258-1.jpeg"></li>
53
52
  </div>
54
53
 
55
54
  </body>
56
55
  </html>
56
+
57
57
  以下CSS
58
58
 
59
59
  @charset "UTF-8";
JavaScriptHTML

5

CSS追加

2022/01/27 06:13

投稿

soramaru
soramaru

スコア25

test CHANGED
File without changes
test CHANGED
@@ -54,10 +54,8 @@
54
54
 
55
55
  </body>
56
56
  </html>
57
+ 以下CSS
57
58
 
58
- ```ここに言語を入力
59
- コード
60
- ```
61
59
  @charset "UTF-8";
62
60
  /* reset */
63
61
  body, h1, h2, h3, h4, h5, h6, p, address,
@@ -143,3 +141,4 @@
143
141
  z-index: auto;
144
142
  }
145
143
 
144
+
JavaScriptHTML

4

CSS追加

2022/01/27 06:10

投稿

soramaru
soramaru

スコア25

test CHANGED
File without changes
test CHANGED
@@ -55,3 +55,91 @@
55
55
  </body>
56
56
  </html>
57
57
 
58
+ ```ここに言語を入力
59
+ コード
60
+ ```
61
+ @charset "UTF-8";
62
+ /* reset */
63
+ body, h1, h2, h3, h4, h5, h6, p, address,
64
+ ul, ol, li, dl, dt, dd, img, form, table, tr, th, td {
65
+ margin: 0;
66
+ padding: 0;
67
+ border: none;
68
+ font-style: normal;
69
+ font-weight: normal;
70
+ font-size: 100%;
71
+ text-align: left;
72
+ list-style-type: none;
73
+ border-collapse: collapse;
74
+ }
75
+
76
+ textarea { font-size: 100%; vertical-align:middle;}
77
+ img { border-style: none; display: block; }
78
+ hr { display: none; }
79
+ em{font-style: normal}
80
+ input{line-height:auto;vertical-align:middle;}
81
+ strong.more{color:#c30}
82
+ a{text-decoration: none;}
83
+
84
+ html {
85
+
86
+ }
87
+
88
+ body {
89
+ font-family:'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif;
90
+ }
91
+
92
+ * {
93
+ -webkit-box-sizing: border-box;
94
+ -moz-box-sizing: border-box;
95
+ -o-box-sizing: border-box;
96
+ -ms-box-sizing: border-box;
97
+ box-sizing: border-box;
98
+ }
99
+
100
+ /* 上の部分は気にせずここから書く */
101
+
102
+ html{
103
+ background-color: #f5f5f5
104
+ }
105
+
106
+ header{
107
+ width: 100%;
108
+ height: 120px;
109
+ background-color: #fff
110
+ }
111
+
112
+ .header-box{
113
+ border: red 2px solid;
114
+ max-width: 1200px;
115
+ margin: 0 auto;
116
+ justify-content: space-between;
117
+ padding-top:30px;
118
+ }
119
+
120
+ #inner-header{
121
+ display: flex;
122
+ justify-content: space-between;
123
+ padding: 2px 2.5px;
124
+ align-items: center;
125
+ z-index: 100px;
126
+ }
127
+
128
+
129
+ .header-list{
130
+ display: flex;
131
+ max-width: 1200px;
132
+ }
133
+
134
+ .header-list li{
135
+ justify-content: center;
136
+ padding: 0 10px;
137
+ }
138
+
139
+ .fadein-header img{
140
+ max-width: 100%;
141
+ height: 1000px;
142
+ margin: 0 auto;
143
+ z-index: auto;
144
+ }
145
+
JavaScriptHTML

3

文変更

2022/01/27 05:47

投稿

soramaru
soramaru

スコア25

test CHANGED
File without changes
test CHANGED
@@ -2,6 +2,9 @@
2
2
  何回か思考錯誤していますが、画像を表示するとこまでは理解して出来ています。
3
3
  しかし、javascriptで画像を切り替わるよう設定して試しています。
4
4
  とりあえず、一枚をfadein出来るようにしようと設定していますが出来ていません。
5
+
6
+ 現象として、画像が上にヘッダーがあり、画像が4枚並んでいるだけになっています。
7
+ エラー表示はでていません。
5
8
  知識をお借りしたいです。
6
9
 
7
10
  9から１４列目の部分です。
JavaScriptHTML

2

文変更

2022/01/27 05:37

投稿

soramaru
soramaru

スコア25

test CHANGED
File without changes
test CHANGED
@@ -1,5 +1,7 @@
1
1
  トップ部分に1980×1280サイズの背景画像を変化させていきたいのですが。
2
- 何回か思考錯誤していますが上手くいきません。
2
+ 何回か思考錯誤していますが、画像を表示するとこまでは理解して出来ています。
3
+ しかし、javascriptで画像を切り替わるよう設定して試しています。
4
+ とりあえず、一枚をfadein出来るようにしようと設定していますが出来ていません。
3
5
  知識をお借りしたいです。
4
6
 
5
7
  9から１４列目の部分です。
JavaScriptHTML

1

文字

2022/01/27 04:56

投稿

soramaru
soramaru

スコア25

test CHANGED
File without changes
test CHANGED
@@ -2,8 +2,8 @@
2
2
  何回か思考錯誤していますが上手くいきません。
3
3
  知識をお借りしたいです。
4
4
 
5
- 9~14行目の部分です。
5
+ 9から１４列目の部分です。
6
- 画像は、34~39列目の部分です。
6
+ 画像は３４から３９列目の部分です。
7
7
 
8
8
  ```ここに言語を入力
9
9
  コード
JavaScriptHTML