質問編集履歴
4
見やすくしました
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -8,6 +8,7 @@
|
|
|
8
8
|
画面幅によって画像が変わらない
|
|
9
9
|
|
|
10
10
|
|
|
11
|
+
|
|
11
12
|
### 該当のソースコード
|
|
12
13
|
|
|
13
14
|
```html
|
|
@@ -31,8 +32,9 @@
|
|
|
31
32
|
|
|
32
33
|
|
|
33
34
|
</div>
|
|
35
|
+
```css
|
|
34
36
|
|
|
35
|
-
|
|
37
|
+
```
|
|
36
38
|
.top_img {
|
|
37
39
|
width: 80%;
|
|
38
40
|
display: block;
|
|
@@ -49,7 +51,9 @@
|
|
|
49
51
|
display: none;
|
|
50
52
|
}
|
|
51
53
|
|
|
52
|
-
JS
|
|
54
|
+
```JS
|
|
55
|
+
|
|
56
|
+
```
|
|
53
57
|
function slideshow() {
|
|
54
58
|
if (count % 2 == 0 && count % 3 == 2) {
|
|
55
59
|
$(".bg").eq(0).addClass("bg_dn");
|
3
HTMLの書き方を変えました
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -76,4 +76,4 @@
|
|
|
76
76
|
|
|
77
77
|
### 補足情報（FW/ツールのバージョンなど）
|
|
78
78
|
|
|
79
|
-
Pictureではなくimgタグを使い
|
|
79
|
+
Pictureではなくimgタグを使いCSSでレスポンスした際は出来ました。
|
2
HTMLの書き方を変えました
title
CHANGED
|
@@ -1,1 +1,1 @@
|
|
|
1
|
-
PictureのMax-widthが反映されない
|
|
1
|
+
PictureタグのMax-widthが反映されない
|
body
CHANGED
|
File without changes
|
1
HTMLの書き方を変えました
title
CHANGED
|
@@ -1,1 +1,1 @@
|
|
|
1
|
-
Picture
|
|
1
|
+
PictureのMax-widthが反映されない
|
body
CHANGED
|
@@ -1,34 +1,37 @@
|
|
|
1
1
|
### 前提・実現したいこと
|
|
2
|
-
以下のサイトのTOP画像のように一定の時間で画像が変わるようにしたい。
|
|
2
|
+
以下のサイトのTOP画像のように一定の時間と画面幅で画像が変わるようにしたい。
|
|
3
3
|
https://www.rakuten.ne.jp/gold/ight-tokyo/
|
|
4
4
|
|
|
5
5
|
|
|
6
|
-
ここに質問の内容を詳しく書いてください。
|
|
7
|
-
（例）PHP(CakePHP)で●●なシステムを作っています。
|
|
8
|
-
■■な機能を実装中に以下のエラーメッセージが発生しました。
|
|
9
|
-
|
|
10
6
|
### 発生している問題
|
|
11
7
|
|
|
12
|
-
|
|
8
|
+
画面幅によって画像が変わらない
|
|
13
9
|
|
|
14
10
|
|
|
15
11
|
### 該当のソースコード
|
|
16
12
|
|
|
17
13
|
```html
|
|
18
14
|
|
|
19
|
-
<
|
|
15
|
+
<div class="top_img" id="top_img">
|
|
16
|
+
<picture class="bg ">
|
|
20
|
-
|
|
17
|
+
<source media="(max-width: 1024px)" srcset="image/slider03.png">
|
|
18
|
+
<source media="(max-width: 580px)" srcset="img/kv_sp_1.jpg">
|
|
19
|
+
<img src="image/slider03.png">
|
|
20
|
+
</picture>
|
|
21
|
+
<picture class="bg bg_dn ">
|
|
21
|
-
|
|
22
|
+
<source media="(max-width: 1024px)" srcset="image/download-1.jpg ">
|
|
23
|
+
<source media="(max-width: 580px)" srcset="img/kv_sp_2.jpg">
|
|
24
|
+
<img src="image/download-1.jpg ">
|
|
25
|
+
</picture>
|
|
26
|
+
<picture class="bg bg_dn ">
|
|
22
|
-
|
|
27
|
+
<source media="(max-width: 1024px)" srcset="image/download.jpg ">
|
|
28
|
+
<source media="(max-width: 580px)" srcset="img/kv_sp_3.jpg">
|
|
29
|
+
<img src="image/download.jpg ">
|
|
30
|
+
</picture>
|
|
23
31
|
|
|
24
|
-
<source media="(max-width: 580px)" class="bg " srcset="img/kv_sp_1.jpg">
|
|
25
|
-
<source media="(max-width: 580px)" class="bg bg_dn" srcset="img/kv_sp_2.jpg">
|
|
26
|
-
<source media="(max-width: 580px)" class="bg bg_dn" srcset="img/kv_sp_3.jpg">
|
|
27
32
|
|
|
28
|
-
<
|
|
33
|
+
</div>
|
|
29
34
|
|
|
30
|
-
</picture>
|
|
31
|
-
|
|
32
35
|
css
|
|
33
36
|
.top_img {
|
|
34
37
|
width: 80%;
|
|
@@ -51,18 +54,15 @@
|
|
|
51
54
|
if (count % 2 == 0 && count % 3 == 2) {
|
|
52
55
|
$(".bg").eq(0).addClass("bg_dn");
|
|
53
56
|
$(".bg").eq(1).removeClass("bg_dn");
|
|
54
|
-
|
|
57
|
+
|
|
55
|
-
$(".bg").eq(4).removeClass("bg_dn");
|
|
56
58
|
} else if (count % 2 == 0 && count % 3 == 1) {
|
|
57
59
|
$(".bg").eq(1).addClass("bg_dn");
|
|
58
60
|
$(".bg").eq(2).removeClass("bg_dn");
|
|
59
|
-
|
|
61
|
+
|
|
60
|
-
$(".bg").eq(5).removeClass("bg_dn");
|
|
61
62
|
} else if (count % 2 == 0 && count % 3 == 0) {
|
|
62
63
|
$(".bg").eq(2).addClass("bg_dn");
|
|
63
64
|
$(".bg").eq(0).removeClass("bg_dn");
|
|
64
|
-
|
|
65
|
+
|
|
65
|
-
$(".bg").eq(3).removeClass("bg_dn");
|
|
66
66
|
}
|
|
67
67
|
console.log(count);
|
|
68
68
|
count++;
|