https://murasakishikibu.co.jp/js/animation.js

1
2function sliderStart() {
3
4    const slide = document.getElementById('slide_wrapp');      //スライダー親
5    const slideItem = slide.querySelectorAll('.slide_item');   //スライド要素
6    const totalNum = slideItem.length - 1;                     // スライドの枚数を取得
7    const FadeTime = 2000;                                     //フェードインの時間
8    const IntarvalTime = 5000;                                 //クロスフェードさせるまでの間隔
9    let actNum = 0;                                            //現在アクティブな番号
10    let nowSlide;                                              //現在表示中のスライド
11    let NextSlide;                                             //次に表示するスライド
12
13    // DOM読み込み時にスライドの1枚目をフェードイン
14    slideItem[0].classList.add('show_', 'zoom_');
15
16    // 処理を繰り返す
17    setInterval(() => {
18        if (actNum < totalNum) {
19          
20            nowSlide = slideItem[actNum];
21            NextSlide = slideItem[++actNum];
22
23            //.show_削除でフェードアウト
24            nowSlide.classList.remove('show_');
25            // と同時に、次のスライドがズームしながらフェードインする
26            NextSlide.classList.add('show_', 'zoom_');
27            //フェードアウト完了後、.zoom_削除
28            setTimeout(() => {
29                nowSlide.classList.remove('zoom_');
30            }, FadeTime);
31
32
33        } else {
34
35            nowSlide = slideItem[actNum];
36            NextSlide = slideItem[actNum = 0];
37
38            //.show_削除でフェードアウト
39            nowSlide.classList.remove('show_');
40            // と同時に、次のスライドがズームしながらフェードインする
41            NextSlide.classList.add('show_', 'zoom_');
42            //フェードアウト完了後、.zoom_削除
43            setTimeout(() => {
44                nowSlide.classList.remove('zoom_');
45            }, FadeTime);
46
47        };
48    }, IntarvalTime);
49
50}