質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

3回答

1142閲覧

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

19941224ngng

総合スコア19

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2020/06/03 07:12

編集2020/06/03 07:33

フェードで切り替えのスライドショーを作りたいと考えています。
表示される画像が最後の画像であれば最初の画像を表示する様に実装したのですが、うまく作動しません。
スライドショーの実装にはいくつか方法があると思うのですが、今回は、画像を重ねて配置し、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);

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Lhankor_Mhy

2020/06/03 07:17

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

2020/06/03 07:33

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

2020/06/03 07:42

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

回答3

0

ベストアンサー

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

総合スコア35865

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

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

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

0

興味があったので書いてみました。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

投稿2020/06/03 12:15

退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

19941224ngng

2020/06/03 12:21

回答いただきありがとうございます! こういった方法もあるのですね! 勉強になりました。ありがとうございます!
guest

0

cssのanimation使っていいならこんな感じで

投稿2020/06/03 08:43

yambejp

総合スコア114572

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

19941224ngng

2020/06/03 12:24

ありがとうございます。 なるほどです。 javascriptのact_idxやprev_idxで使われている?はどういう時に使うのでしょうか? 比較演算子的なものでしょうか?
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問