回答編集履歴

3

一枚の画像の表示時間を10秒程度表示してからフェードアウト

2017/09/12 21:05

投稿

naomi3
naomi3

スコア1105

test CHANGED
@@ -92,6 +92,12 @@
92
92
 
93
93
  交互に拡大、縮小をスライドするようにしました。
94
94
 
95
+
96
+
97
+ これでいいでしょうか?
98
+
99
+ マシントラブルと勘違いによりはまってしまいました。すみません。
100
+
95
101
  ```HTML
96
102
 
97
103
  <!DOCTYPE html>
@@ -146,6 +152,8 @@
146
152
 
147
153
  display: none;
148
154
 
155
+ z-index: 1;
156
+
149
157
  }
150
158
 
151
159
 
@@ -256,11 +264,11 @@
256
264
 
257
265
  var slide = $('.slideshow');
258
266
 
259
- var itemIndex = 0;
267
+ var itemIndex = 0, prevItemIndex;
260
268
 
261
269
  var classes = ['up', 'down'];
262
270
 
263
- var closeClasses = ['closeUp', 'closeDown'];
271
+ var classesClosing = ['closeUp', 'closeDown'];
264
272
 
265
273
  var upOrDown = 0;
266
274
 
@@ -272,9 +280,9 @@
272
280
 
273
281
 
274
282
 
275
- // スライドの枚数を調べて変数に格納
283
+ // スライドの枚数を調べて、最後のインデックスを変数に格納
276
-
284
+
277
- var total = $('.slideshow .item').length -1;
285
+ var lastItemIndex = $('.slideshow .item').length - 1;
278
286
 
279
287
 
280
288
 
@@ -288,7 +296,7 @@
288
296
 
289
297
  slide.find('.item').eq(itemIndex).fadeIn(3500).addClass(classes[1 - upOrDown])
290
298
 
291
- .removeClass(closeClasses[1 - upOrDown]).removeClass(classes[upOrDown]);
299
+ .removeClass(classesClosing[1 - upOrDown]).removeClass(classes[upOrDown]);
292
300
 
293
301
  }, 1000);
294
302
 
@@ -298,7 +306,7 @@
298
306
 
299
307
 
300
308
 
301
- if (itemIndex < total) {
309
+ if (itemIndex < lastItemIndex) {
302
310
 
303
311
  itemIndex++;
304
312
 
@@ -320,15 +328,15 @@
320
328
 
321
329
  // 4500ミリ秒かけてフェードアウトする
322
330
 
323
- slide.find('.item').eq(prevItemIndex).fadeOut(4500).addClass(closeClasses[1 - upOrDown])
331
+ slide.find('.item').eq(prevItemIndex).fadeOut(4500).addClass(classesClosing[1 - upOrDown])
324
-
332
+
325
- .removeClass(classes[1 - upOrDown]).removeClass(closeClasses[upOrDown]);
333
+ .removeClass(classes[1 - upOrDown]).removeClass(classesClosing[upOrDown]);
326
334
 
327
335
 
328
336
 
329
337
  // この値を変更すると、処理の間隔を遅くしたり早くしたりできる
330
338
 
331
- }, 4500);
339
+ }, 16000);
332
340
 
333
341
  });
334
342
 

2

かなりスムーズに、交互に拡大、縮小をスライドするように修正

2017/09/12 21:05

投稿

naomi3
naomi3

スコア1105

test CHANGED
@@ -78,4 +78,288 @@
78
78
 
79
79
 
80
80
 
81
-
81
+ > 2.最終スライドのあと、トップに戻るスライドがスムーズになりません。
82
+
83
+
84
+
85
+ これでかなりスムーズになったと思います。
86
+
87
+
88
+
89
+ > 2.1枚目の画像は拡大、2枚目の画像は縮小するように交互に拡大、縮小をスライドするにはどうすればいいでしょうか。
90
+
91
+
92
+
93
+ 交互に拡大、縮小をスライドするようにしました。
94
+
95
+ ```HTML
96
+
97
+ <!DOCTYPE html>
98
+
99
+ <html lang="ja">
100
+
101
+ <head>
102
+
103
+ <meta charset="UTF-8">
104
+
105
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
106
+
107
+ <meta http-equiv="X-UA-Compatible" content="ie=edge">
108
+
109
+ <title></title>
110
+
111
+ <style>
112
+
113
+ * {
114
+
115
+ margin: 0;
116
+
117
+ padding: 0;
118
+
119
+ }
120
+
121
+
122
+
123
+ .slideshow {
124
+
125
+ position: relative;
126
+
127
+ width: 70%;
128
+
129
+ padding-top: 70%;
130
+
131
+ overflow: hidden;
132
+
133
+ margin: 0 auto;
134
+
135
+ }
136
+
137
+
138
+
139
+ .slideshow .item {
140
+
141
+ width: 100%;
142
+
143
+ position: absolute;
144
+
145
+ top: 0;
146
+
147
+ display: none;
148
+
149
+ }
150
+
151
+
152
+
153
+ .down {
154
+
155
+ -webkit-transform: scale(1);
156
+
157
+ transform: scale(1);
158
+
159
+ z-index: 2;
160
+
161
+ }
162
+
163
+
164
+
165
+ .up {
166
+
167
+ -webkit-transform: scale(1.25);
168
+
169
+ transform: scale(1.25);
170
+
171
+ z-index: 1;
172
+
173
+ }
174
+
175
+
176
+
177
+ .closeDown {
178
+
179
+ -webkit-transform: scale(1);
180
+
181
+ transform: scale(1);
182
+
183
+ -webkit-transition: 4s;
184
+
185
+ transition: 4s;
186
+
187
+ z-index: 1;
188
+
189
+ }
190
+
191
+
192
+
193
+ .closeUp {
194
+
195
+ -webkit-transform: scale(1.25);
196
+
197
+ transform: scale(1.25);
198
+
199
+ -webkit-transition: 4s;
200
+
201
+ transition: 4s;
202
+
203
+ z-index: 2;
204
+
205
+ }
206
+
207
+
208
+
209
+ .mask {
210
+
211
+ position: absolute;
212
+
213
+ width: 100%; /* 指定しないと0になる */
214
+
215
+ height: 100%; /* 指定しないと0になる */
216
+
217
+ top: 610px; /* はみ出してはいけない、上からの高さ */
218
+
219
+ background-color: white; /* 背景と同じ色 */
220
+
221
+ z-index: 3; /* 最も手前(最大値) */
222
+
223
+ }
224
+
225
+
226
+
227
+ </style>
228
+
229
+ <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
230
+
231
+
232
+
233
+ <script>
234
+
235
+ function isBrowserIE() {
236
+
237
+ return navigator.userAgent.toLowerCase().indexOf('trident') >= 0;
238
+
239
+ }
240
+
241
+
242
+
243
+
244
+
245
+ $(window).load(function(){
246
+
247
+ if (isBrowserIE()) {
248
+
249
+ var maskTop = $('.mask').css('top').replace(/px$/, '') - 34;
250
+
251
+ $('.mask').css('top', maskTop);
252
+
253
+ }
254
+
255
+
256
+
257
+ var slide = $('.slideshow');
258
+
259
+ var itemIndex = 0;
260
+
261
+ var classes = ['up', 'down'];
262
+
263
+ var closeClasses = ['closeUp', 'closeDown'];
264
+
265
+ var upOrDown = 0;
266
+
267
+
268
+
269
+ // ページの読み込み時にスライドの1枚目を2000ミリ秒かけてフェードイン
270
+
271
+ slide.find('.item').eq(itemIndex).fadeIn(2000).addClass(classes[1 - upOrDown]);
272
+
273
+
274
+
275
+ // スライドの枚数を調べて変数に格納
276
+
277
+ var total = $('.slideshow .item').length -1;
278
+
279
+
280
+
281
+ // 処理を繰り返す
282
+
283
+ setInterval(function() {
284
+
285
+ setTimeout(function() {
286
+
287
+ // 1000ミリ秒後に3500ミリ秒かけてフェードインする
288
+
289
+ slide.find('.item').eq(itemIndex).fadeIn(3500).addClass(classes[1 - upOrDown])
290
+
291
+ .removeClass(closeClasses[1 - upOrDown]).removeClass(classes[upOrDown]);
292
+
293
+ }, 1000);
294
+
295
+
296
+
297
+ prevItemIndex = itemIndex;
298
+
299
+
300
+
301
+ if (itemIndex < total) {
302
+
303
+ itemIndex++;
304
+
305
+ }
306
+
307
+ else {
308
+
309
+ itemIndex = 0;
310
+
311
+ }
312
+
313
+
314
+
315
+ // 反転
316
+
317
+ upOrDown = 1 - upOrDown;
318
+
319
+
320
+
321
+ // 4500ミリ秒かけてフェードアウトする
322
+
323
+ slide.find('.item').eq(prevItemIndex).fadeOut(4500).addClass(closeClasses[1 - upOrDown])
324
+
325
+ .removeClass(classes[1 - upOrDown]).removeClass(closeClasses[upOrDown]);
326
+
327
+
328
+
329
+ // この値を変更すると、処理の間隔を遅くしたり早くしたりできる
330
+
331
+ }, 4500);
332
+
333
+ });
334
+
335
+
336
+
337
+ </script>
338
+
339
+ </head>
340
+
341
+
342
+
343
+ <body>
344
+
345
+ <h1 class="title"></h1>
346
+
347
+ <div class="slideshow">
348
+
349
+ <img class="item" src="img1.jpg" alt="">
350
+
351
+ <img class="item" src="img2.jpg" alt="">
352
+
353
+ <img class="item" src="img3.jpg" alt="">
354
+
355
+ <!-- div.slideshow の中にマスク -->
356
+
357
+ <div class="mask"></div>
358
+
359
+ </div>
360
+
361
+ </body>
362
+
363
+ </html>
364
+
365
+ ```

1

IEでもはみ出さないように修正

2017/08/28 14:58

投稿

naomi3
naomi3

スコア1105

test CHANGED
@@ -37,3 +37,45 @@
37
37
  }
38
38
 
39
39
  ```
40
+
41
+
42
+
43
+ 綺麗なやり方ではないのですが、次のように書きかえるとIEでもはみ出さなくなります。
44
+
45
+ (IEでのちらつき阻止はまだです。)
46
+
47
+ ```JavaScript
48
+
49
+ $(window).load(function(){
50
+
51
+ ```
52
+
53
+
54
+
55
+ ```JavaScript
56
+
57
+ function isBrowserIE() {
58
+
59
+ return navigator.userAgent.toLowerCase().indexOf('trident') >= 0;
60
+
61
+ }
62
+
63
+
64
+
65
+ $(window).load(function(){
66
+
67
+ if (isBrowserIE()) {
68
+
69
+ var maskTop = $('.mask').css('top').replace(/px$/, '') - 34;
70
+
71
+ $('.mask').css('top', maskTop);
72
+
73
+ }
74
+
75
+ ```
76
+
77
+ 交互に行うFIXは調査中です。
78
+
79
+
80
+
81
+