質問編集履歴

1

改善しない問題点を追記

2020/09/22 01:25

投稿

treevillage
treevillage

スコア4

test CHANGED
File without changes
test CHANGED
@@ -1,3 +1,277 @@
1
+ ### 2020/09/22追記
2
+
3
+ > 背景変更ボタンをタップしたら、背景画像が変わるようにしました。
4
+
5
+ > 切り替わる際にスライドするアニメーションをいれたいのですが、
6
+
7
+ > 自分のスキルではわかりませんでした。
8
+
9
+
10
+
11
+ スライドアニメーションをいれたら、背景変更ボタンをタップで切り替えることができなくなりました。
12
+
13
+ 現状は、タイマー形式で背景画像にスライドアニメーションがはいります。
14
+
15
+ タイマー形式の切り替えを削除して、背景変更ボタンで背景画像をスライドアニメーションで切り替えたいです。
16
+
17
+
18
+
19
+ 下記現状のコードです。宜しくお願い致します。
20
+
21
+
22
+
23
+ ```JavaScript
24
+
25
+ $(function() {
26
+
27
+ var idx = 3;
28
+
29
+ var interval = 5000;
30
+
31
+ var items = $(".slide");
32
+
33
+
34
+
35
+ slideTimer();
36
+
37
+ timer = setInterval(slideTimer, interval);
38
+
39
+
40
+
41
+ function slideTimer() {
42
+
43
+ items.removeClass("is-old");
44
+
45
+ items.eq(idx).removeClass("is-now").addClass("is-old");
46
+
47
+ items.eq(idx==3 ? idx=0 : ++idx).addClass("is-now");
48
+
49
+ };
50
+
51
+ });
52
+
53
+ ```
54
+
55
+ ```HTML
56
+
57
+ <body>
58
+
59
+ <div>
60
+
61
+ <div class="submit"><input type="button" value="背景変更" onclick="func()"></div>
62
+
63
+ </div>
64
+
65
+ <div class="slider">
66
+
67
+ <div class="slideSet">
68
+
69
+ <div class="slide">
70
+
71
+ <div class="img"></div>
72
+
73
+ </div>
74
+
75
+ <div class="slide">
76
+
77
+ <div class="img"></div>
78
+
79
+ </div>
80
+
81
+ <div class="slide">
82
+
83
+ <div class="img"></div>
84
+
85
+ </div>
86
+
87
+ <div class="slide">
88
+
89
+ <div class="img"></div>
90
+
91
+ </div>
92
+
93
+ </div>
94
+
95
+ </div>
96
+
97
+ <script>
98
+
99
+ $(function() {
100
+
101
+ var idx = 3;
102
+
103
+ var interval = 5000;
104
+
105
+ var items = $(".slide");
106
+
107
+
108
+
109
+ slideTimer();
110
+
111
+ timer = setInterval(slideTimer, interval);
112
+
113
+
114
+
115
+ function slideTimer() {
116
+
117
+ items.removeClass("is-old");
118
+
119
+ items.eq(idx).removeClass("is-now").addClass("is-old");
120
+
121
+ items.eq(idx==3 ? idx=0 : ++idx).addClass("is-now");
122
+
123
+ };
124
+
125
+ });
126
+
127
+ </script>
128
+
129
+ </body>
130
+
131
+ ```
132
+
133
+
134
+
135
+ ```CSS
136
+
137
+ .submit{
138
+
139
+ position:fixed;
140
+
141
+ bottom:4%;
142
+
143
+ width:86%;
144
+
145
+ left: 50%;
146
+
147
+ transform: translateX(-50%);
148
+
149
+ margin: auto;
150
+
151
+ z-index:100;
152
+
153
+ }
154
+
155
+
156
+
157
+ .slide:nth-child(1) > .img {
158
+
159
+ background-image: url("../img/bg01.jpg");
160
+
161
+ }
162
+
163
+ .slide:nth-child(2) > .img {
164
+
165
+ background-image: url("../img/bg02.jpg");
166
+
167
+ }
168
+
169
+ .slide:nth-child(3) > .img {
170
+
171
+ background-image: url("../img/bg03.jpg");
172
+
173
+ }
174
+
175
+ .slide:nth-child(4) > .img {
176
+
177
+ background-image: url("../img/bg04.jpg");
178
+
179
+ }
180
+
181
+
182
+
183
+ .slider {
184
+
185
+ position: relative;
186
+
187
+ overflow: hidden;
188
+
189
+ width: 100%;
190
+
191
+ height: 100vh;
192
+
193
+ margin: 0 auto
194
+
195
+ }
196
+
197
+ .slide {
198
+
199
+ position: absolute;
200
+
201
+ right: 0;
202
+
203
+ width: 0;
204
+
205
+ height: 100vh;
206
+
207
+ overflow: hidden;
208
+
209
+ transition: width 1.4s linear;
210
+
211
+ transition-timing-function: ease-out;
212
+
213
+ }
214
+
215
+
216
+
217
+ .slide > .img {
218
+
219
+ position: absolute;
220
+
221
+ width: 110vw;
222
+
223
+ height: 110vh;
224
+
225
+ background-position: center;
226
+
227
+ background-size: cover;
228
+
229
+ right: -10vw;
230
+
231
+ transition: right 0s 1s linear;
232
+
233
+ transition-timing-function: ease-out;
234
+
235
+ }
236
+
237
+
238
+
239
+ .slide.is-now > .img, .slide.is-now > .img {
240
+
241
+ right: 0;
242
+
243
+ transition: right 1.4s linear;
244
+
245
+ transition-timing-function: ease-out;
246
+
247
+ }
248
+
249
+ .slide.is-now {
250
+
251
+ width: 100%;
252
+
253
+ z-index: 2;
254
+
255
+ }
256
+
257
+ .slide.is-old {
258
+
259
+ width: 100%;
260
+
261
+ z-index: 1;
262
+
263
+ }
264
+
265
+ ```
266
+
267
+
268
+
269
+
270
+
271
+ ### 2020/09/20投稿
272
+
273
+
274
+
1
275
  背景変更ボタンをタップしたら、背景画像が変わるようにしました。
2
276
 
3
277
  切り替わる際にスライドするアニメーションをいれたいのですが、