HTML、CSS、JavaScriptを使用してスライドショーを作成する方法

Webスライドショーは、特定の時間間隔でシーケンスの1つの要素を表示することで構成される一連の画像またはテキストです。

このチュートリアルでは、次の簡単な手順に従ってスライドショーを作成できます。

マークアップを書く

     Slideshow 

スライドを非表示にし、1つのスライドのみを表示するスタイルを記述します。

スライドを非表示にするには、デフォルトのスタイルを指定する必要があります。スライドがアクティブな場合、または表示する場合は、スライドを1つだけ表示するように指示されます。

 [data-component="slideshow"] .slide { display: none; } [data-component="slideshow"] .slide.active { display: block; }

時間間隔でスライドを変更します。

表示するスライドを変更するための最初のステップは、スライドラッパーを選択してから、そのスライドを選択することです。

スライドを選択するときは、各スライドに目を通し、表示するスライドに応じてアクティブなクラスを追加または削除する必要があります。次に、特定の時間間隔でこのプロセスを繰り返します。

スライドからアクティブなクラスを削除すると、前の手順で定義したスタイルのために非表示になることに注意してください。ただし、アクティブなクラスをスライドに追加すると、スタイルが上書きされるdisplay:none to display:blockため、スライドがユーザーに表示されます。

 var slideshows = document.querySelectorAll('[data-component="slideshow"]'); // Apply to all slideshows that you define with the markup wrote slideshows.forEach(initSlideShow); function initSlideShow(slideshow) { var slides = document.querySelectorAll(`#${slideshow.id} [role="list"] .slide`); // Get an array of slides var index = 0, time = 5000; slides[index].classList.add('active'); setInterval( () => { slides[index].classList.remove('active'); //Go over each slide incrementing the index index++; // If you go over all slides, restart the index to show the first slide and start again if (index === slides.length) index = 0; slides[index].classList.add('active'); }, time); }

このチュートリアルに続くCodepenの例