teratail header banner
teratail header banner
質問するログイン新規登録

回答編集履歴

1

再質問につき修正

2019/10/19 11:28

投稿

naomi3
naomi3

スコア1105

answer CHANGED
@@ -1,45 +1,44 @@
1
1
  こういうことでしょうか。
2
2
 
3
+ source mediaを指定する順番が違うようです。
3
4
  ```HTML
5
+  <div class="top_img" id="top_img">
4
- <picture class="top_img bg">
6
+ <picture class="bg ">
7
+ <source media="(max-width: 580px)" srcset="img/kv_sp_1.jpg">
5
- <source media="(max-width: 1024px)" srcset="image/slider03.png">
8
+ <source media="(max-width: 1024px)" srcset="image/slider03.png">
6
- <img src="image/slider03.png">
9
+ <img src="image/slider03.png">
7
- </picture>
10
+ </picture>
8
-
9
- <picture class="top_img bg bg_dn">
11
+ <picture class="bg bg_dn ">
12
+ <source media="(max-width: 580px)" srcset="img/kv_sp_2.jpg">
10
- <source media="(max-width: 1024px)" srcset="image/download-1.jpg">
13
+ <source media="(max-width: 1024px)" srcset="image/download-1.jpg ">
11
- <img src="image/slider03.png">
14
+ <img src="image/download-1.jpg ">
12
- </picture>
15
+ </picture>
13
-
14
- <picture class="top_img bg bg_dn">
16
+ <picture class="bg bg_dn ">
17
+ <source media="(max-width: 580px)" srcset="img/kv_sp_3.jpg">
15
- <source media="(max-width: 1024px)" srcset="image/download.jpg">
18
+ <source media="(max-width: 1024px)" srcset="image/download.jpg ">
16
- <img src="image/slider03.png">
19
+ <img src="image/download.jpg ">
17
- </picture>
20
+ </picture>
18
-
19
- <picture class="top_img bg">
20
- <source media="(max-width: 580px)" srcset="img/kv_sp_2.jpg">
21
- <img src="image/slider03.png">
22
- </picture>
21
+ </div>
23
-
24
- <picture class="top_img bg bg_dn">
25
- <source media="(max-width: 580px)" srcset="img/kv_sp_2.jpg">
26
- <img src="image/slider03.png">
27
- </picture>
28
-
29
- <picture class="top_img bg bg_dn">
30
- <source media="(max-width: 580px)" srcset="img/kv_sp_3.jpg">
31
- <img src="image/slider03.png">
32
- </picture>
33
-
34
22
  ```
35
23
  ```JavaScript
36
24
  var count = 0;
37
- function slideshow()
25
+ function slideshow() {
26
+
38
- for (var i = 0; i < 6; i++) {
27
+ if (count % 2 == 0 && count % 3 == 2) {
28
+ $(".bg").eq(0).addClass("bg_dn");
39
- $(".bg").eq(i)[i % 3 == count ? 'removeClass' : 'addClass']("bg_dn");
29
+ $(".bg").eq(1).removeClass("bg_dn");
40
30
  }
31
+ else if (count % 2 == 0 && count % 3 == 1) {
32
+ $(".bg").eq(1).addClass("bg_dn");
33
+ $(".bg").eq(2).removeClass("bg_dn");
34
+ }
35
+ else if (count % 2 == 0 && count % 3 == 0) {
36
+ $(".bg").eq(2).addClass("bg_dn");
37
+ $(".bg").eq(0).removeClass("bg_dn");
38
+ }
39
+
41
40
  console.log(count);
42
- count = (count + 1) % 3;
41
+ count = (count + 1) % 6;
43
42
  }
44
- setInterval(slideshow, 4000);
43
+ setInterval(slideshow, 2000);
45
44
  ```