https://www.jtekt.co.jp/assets/js/top_ex.js

1class HomeSlider {
2  sliderElem;
3  constructor() {
4    this.slider = false;
5    this.bg = null;
6    this.sliderElem = document.getElementById('js-mvSlider');
7    this.totalSlide = this.sliderElem.querySelectorAll('.swiper-slide').length;
8    this.timer = [];
9    this.speed = 1000;
10    this.delay = 5000;
11
12    if (document.body.classList.contains('is-disabled-mvSlide')) return;
13
14    this.init();
15  }
16  init() {
17    this.bg = document.createElement('div');
18    this.bg.classList.add('bg');
19    document
20      .querySelector('.mainv-inner')
21      .insertBefore(this.bg, document.querySelector('.topslide'));
22//    this.bg.style.height = `${
23//      document.querySelector('.mainv-inner').clientHeight -
24//      document.querySelector('.mainv-searcharea .inner').clientHeight
25//    }px`;
26    this.bg.style.height = `100%`;
27    this.slider = new Swiper(this.sliderElem.querySelector('.swiper'), {
28      slidesPerView: 1,
29      // loop: true,
30      spaceBetween: 60,
31      speed: this.speed,
32      autoplay: {
33        delay: this.delay,
34        disableOnInteraction: false,
35      },
36      paginationClickable: true,
37      pagination: {
38        el: '.topslide .swiper-pagination',
39        clickable: true,
40      },
41      paginationElement: 'div',
42      on: {
43        init: () => {
44          this.start();
45          document.querySelector(
46            '.topslide .swiper-pagination-bullet:last-child'
47          ).style.visibility = 'hidden';
48        },
49        slideChangeTransitionStart: () => {
50          //
51        },
52        slideChangeTransitionEnd: () => {
53          //
54        },
55        slideNextTransitionStart: () => {
56          if (this.slider.previousIndex === 0) {
57            this.startCancel();
58          }
59        },
60        slidePrevTransitionStart: () => {
61          if (this.slider.previousIndex === 1) {
62            this.end();
63          }
64        },
65        slideChange: () => {
66          const current = this.slider.activeIndex;
67          // console.log(current);
68          switch (current) {
69            // case 0:
70            //   this.end();
71            //   break;
72            case 0: {
73              this.bg.classList.remove('is-active');
74            }
75            case 1:
76              if (!this.slider.autoplay.running) this.slider.autoplay.start();
77              break;
78            case this.totalSlide - 1:
79              // console.log('last');
80              this.end();
81              break;
82            default:
83            //
84          }
85        },
86      },
87    });
88    this.slider.autoplay.stop();
89  }
90  destroy() {
91    this.slider.destory();
92  }
93  reset() {
94    if (this.slider) this.destroy();
95    this.bg.classList.remove('is-active');
96    this.sliderElem.style.opacity = 0;
97    setTimeout(() => {
98      this.init();
99    }, 500);
100  }
101  start() {
102    this.timer.push(
103      setTimeout(() => {
104        this.bg.classList.add('is-active');
105        this.timer.push(
106          setTimeout(() => {
107            this.sliderElem.animate([{ opacity: 0 }, { opacity: 1 }], {
108              fill: 'forwards',
109              duration: 250,
110            });
111            this.slider.slideNext();
112          }, 500)
113        );
114      }, this.delay - 500)
115    );
116  }
117  end() {
118    this.slider.autoplay.stop();
119    this.sliderElem.animate([{ opacity: 1 }, { opacity: 0 }], {
120      fill: 'forwards',
121      duration: 500,
122    }).onfinish = () => {
123      this.slider.slideTo(0);
124      this.start();
125    };
126    this.bg.classList.remove('is-active');
127  }
128  startCancel() {
129    this.timer.forEach((v, i) => {
130      clearTimeout(v);
131      this.timer.shift();
132    });
133    // console.log(mainSlider.params.sTimer)
134    this.bg.classList.add('is-active');
135    // this.opacityAnimation(this.sliderElem, 100);
136    this.sliderElem.animate([{ opacity: 0 }, { opacity: 1 }], {
137      fill: 'forwards',
138      duration: 100,
139    });
140  }
141}
142
143document.addEventListener('DOMContentLoaded', () => {
144  const homeSlider = new HomeSlider();
145});