javascript（jqueryは使わない）でフェード切り替えのスライドショーを作成したいです。

フェードで切り替えのスライドショーを作りたいと考えています。
表示される画像が最後の画像であれば最初の画像を表示する様に実装したのですが、うまく作動しません。
スライドショーの実装にはいくつか方法があると思うのですが、今回は、画像を重ねて配置し、activeのついた画像をopacity: 1;で表示したいと考えていますがうまくいきません。
どの様にしたらうまく表示されでしょうか？

他のサイトを拝見し、参考にしようと思ったのですが、jqueryを用いたものが多く、今回はjavascriptのみで実装しなければならないので、こちらでご教授いただきたいと思い質問させていただきました。
どうか、よろしくお願いいたします。

html
1<div class="image">
2  <div class="bg-image">
3    <img src="img/logo-bg0.png" alt="ロゴ" class="bg-main active" />
4    <img src="img/logo-bg1.png" alt="ロゴ" class="bg-main" />
5    <img src="img/logo-bg2.png" alt="ロゴ" class="bg-main" />
6    <img src="img/logo-bg3.png" alt="ロゴ" class="bg-main" />
7    <img src="img/logo-bg4.png" alt="ロゴ" class="bg-main" />
8  </div>
9</div>

css
1.image {
2  width: auto;
3  height: 100vh;
4  position: relative;
5  z-index: 0;
6}
7
8.bg-main {
9  position: absolute;
10  top: 0;
11  left: 0;
12  width: 100%;
13  height: 100vh;
14  opacity: 0;
15  transition: opacity 3s ease;
16  object-fit: cover;
17}
18
19.bg-main.active {
20  opacity: 1;
21}

javascript
1const bgMain = document.querySelectorAll(".bg-main");
2let current = 0;
3
4  function slideshow() {
5    if (current === 4) {
6      current = 0;
7    } else {
8      current ++;
9    }
10
11    bgMain[current].classList.toggle('active');
12    console.log("slide");
13  }
14  setInterval(slideshow, 4000);

Lhankor_Mhy

2020/06/03 07:17

かっこの整合が合わないですが、コピペミスですか？

yambejp

2020/06/03 07:33

トリガーはなく読み込んだら順番に5枚の絵を見せる？最後ループするのでしょうか？

19941224ngng

2020/06/03 07:42

そうですね！ページを読み込んだ時点でスライドが始まる感じです。最後までいったらループする様にはしてあるのですが、うまくいかないです、、

行動規範の内容に同意します

回答3件

ベストアンサー

js
1const bgMain = document.querySelectorAll(".bg-main"); // ドット忘れ
2let current = 0; // スコープの外に出す
3
4  function slideshow() {
5
6    bgMain[current].classList.toggle('active'); // 消し忘れ
7
8    if (current === 4) {
9      current = 0;
10    } else {
11      current ++;
12    }
13
14    bgMain[current].classList.toggle('active');
15    console.log("slide");
16  }
17  setInterval(slideshow, 4000);

開発者ツールでデバッグをすることをお勧めします。
コンソールの使用 | Tools for Web Developers | Google Developers

投稿2020/06/03 07:25

Lhankor_Mhy

総合スコア36896

19941224ngng

2020/06/03 07:40

ありがとうございます。ご指摘いただいた点を修正したところ、作動する様にはなりました。しかし、五枚目の画像を表示した後しばらく画像の切り替えが行われず、何秒か経過してから、また再開されるというような状態になりました。 if文でcurrentが4になったら0に戻ると言うように実装してあるのですが、何故なのでしょうか、、

Lhankor_Mhy

2020/06/03 07:50

問題が確認できていませんが、かなり微妙な動作の話ですか？推測ですが、5枚目が一番手前にあるので、重ね合わせの問題では？と思いました。

Lhankor_Mhy

2020/06/03 07:52

.bg-main.active { z-index: 999; } みたいなことをすれば、確認できるかもしれませんね。

19941224ngng

2020/06/03 12:24

ありがとうございます。ベストアンサーに選ばさせていただきました！

行動規範の内容に同意します

興味があったので書いてみました。css の animation と終了した時のイベントを利用しています。

html
1<!DOCTYPE html>
2<meta charset="UTF-8">
3<title>FadeIn</title>
4<style>
5.wrap > * {
6  position: absolute;
7}
8.active {
9  opacity: 0;
10  animation: fadeIn 4s;
11}
12@keyframes fadeIn {
13  from { opacity: 1 ; }
14  50% { opacity: 1; }
15  to { opacity: 0 ; }
16}
17
18</style>
19
20<body>
21<div class="wrap">
22  <img src="https://placehold.jp/ff0000/00ffff/150x150.png?text=1">
23  <img src="https://placehold.jp/00ff00/ff00ff/150x150.png?text=2">
24  <img src="https://placehold.jp/0000ff/ffff00/150x150.png?text=3">
25  <img src="https://placehold.jp/000000/ffffff/150x150.png?text=4">
26  <img src="https://placehold.jp/ffff00/0000ff/150x150.png?text=5">
27</div>
28    
29
30<script>
31
32class Fadein {
33  constructor (wrap, css = 'active') {
34    this.wrap = wrap;
35    this.css = css;
36    wrap.addEventListener('animationend', this, false);
37    this.start ();
38  }
39
40  start () {
41    this.wrap.lastElementChild.classList.add (this.css);
42  }
43
44  handleEvent (event) {
45    this.wrap.insertBefore (event.target, this.wrap.firstElementChild).classList.remove (this.css);
46    this.start ();
47  }
48}
49
50new Fadein (document.querySelector ('.wrap'));
51
52</script>
53