回答編集履歴
1
コメント欄対応
answer
CHANGED
|
@@ -26,4 +26,35 @@
|
|
|
26
26
|
|
|
27
27
|
そんなことはありません。
|
|
28
28
|
JavaScriptのsetIntervalを始めとするイベントループの機能はとても優秀で、
|
|
29
|
-
発火すべきタイミングまでひたすらサボり続ける低燃費の設計になっています。
|
|
29
|
+
発火すべきタイミングまでひたすらサボり続ける低燃費の設計になっています。
|
|
30
|
+
|
|
31
|
+
---
|
|
32
|
+
|
|
33
|
+
【おまけ】 コメント欄のコード
|
|
34
|
+
|
|
35
|
+
外にあるi変数に依存しないようにしました。
|
|
36
|
+
こんな感じかなぁと思います。
|
|
37
|
+
|
|
38
|
+
```JavaScript
|
|
39
|
+
// DOMを触るので描画完了まで遅延させたほうが良い
|
|
40
|
+
document.addEventListener("load", function () {
|
|
41
|
+
var items = [0, 1, 2, 3].map(function(it){ return document.getElementById('slide' + it); });
|
|
42
|
+
var fadeIn = function (i) {
|
|
43
|
+
items[i].classList.add('slide-fadein');
|
|
44
|
+
items[i].classList.remove('slide-fadeout');
|
|
45
|
+
}
|
|
46
|
+
var fadeOut = function (i) {
|
|
47
|
+
items[i].classList.add('slide-fadeout');
|
|
48
|
+
items[i].classList.remove('slide-fadein');
|
|
49
|
+
}
|
|
50
|
+
var slideShow = function (i) {
|
|
51
|
+
if (i => items.length) {
|
|
52
|
+
i = 0;
|
|
53
|
+
}
|
|
54
|
+
fadeIn(i);
|
|
55
|
+
fadeOut(i === 0 ? items.length - 1 : i - 1);
|
|
56
|
+
setTimeout(slideShow.bind(null, i + 1), 18000);
|
|
57
|
+
}
|
|
58
|
+
setTimeout(slideShow.bind(null, 0), 18000);
|
|
59
|
+
});
|
|
60
|
+
```
|