Slide Show（自動スライドショー）

　Slide Show とは画像といったコンテンツを自動または手動で切り替え表示する方法のことです。

　スライドショーは、クラウドに記録された写真の切り替えに使用したり、広告用のサイトでは商品やサービスの理解を深めてもらうために利用されることを見かけます。
　ここでは JavaScript と CSS によって単位時間ごとに自動で切り替える簡単なスライドショーの作成例を解説します。

　手動で画像を切り替える方法はSlide Show（スライドショー）ページを参照してください。

　背景をスライドショー化することもできます。背景のスライドショーについてはSlide Showページを参照してください。

Example

　自動で切り替えるタイプのスライドショーの例です。
　単位時間ごとに画像の表示を切り替えます。
　左右にある矢印<、>や最下段の○ボタンをクリックすることで画像を切り替えることもできます。
　切り替わる際に徐々に全体が表示されようにしてあります。

CSSあり scriptあり上記のフレーム内に表示します。

HTML

　各画像は、番号、画像、キャプションテキストをimg_boxとして包括しています。さらにnext、pre操作ボタン、各画像の表示ボタンとimg_boxをSlidesshow_imagesコンテナとして包括しています。

　class名のfadeはfade in表示にするものです。

css

　全体のコンテナパラメータposition: relative;にして、表示位置を自由になるようにしています。

@keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}

* {box-sizing:border-box}

/* images container */
.imgs_cntnr {
  max-width: 1000px;
  position: relative;
  margin: auto;
}

/* Hide the images by default */
.imgs_cntnr .img_box {
  display: none;
}

/* Fading animation */
.imgs_cntnr .fade {
  animation-name: fade;
  animation-duration: 4s;
}

/* Caption or Text */
.imgs_cntnr .img_box .cptn_txt {
  color: #f2f2f2;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}

/* next & previous buttons */
.imgs_cntnr .pre, .nxt {
	cursor: pointer;
	position: absolute;
	top: 50%;
	width: auto;
	margin-top: -22px;
	padding: 16px;
	color: white;
	font-weight: bold;
	font-size: 18px;
	transition: 0.6s ease;
	border-radius: 0 3px 3px 0;
	user-select: none;
}

/* Position the "next button" to the right */
.imgs_cntnr .nxt {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.imgs_cntnr .pre:hover, .nxt:hover {
  background-color: rgba(0,0,0,0.6);
}

/* The specify button/bullets/indicators */
.spcfy_bttn {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.8s ease;
}

.active, .spcfy_bttn:hover {
  background-color: #717171;
}

JavaScript

var CRRNT_NO = 0;
var OLD_NO = 1;
var WAIT_SEC = 6;		// unit is sec.
var SETTIMEOUT_ID = null;		// function setTimeout ID

window.onload = function() {
	slide_Imgs_wait();
};

// Next/previous Imges
function pre_next_Img( num ) {
  slide_Imgs( CRRNT_NO += num );
}

// specify image
function specify_Img( num ) {
  slide_Imgs( CRRNT_NO = num );
}

function slide_Imgs( num ) {
	if(SETTIMEOUT_ID) clearTimeout(SETTIMEOUT_ID);
	var i;
	var list_imgs = document.getElementsByClassName("img_box");
	var list_bttns = document.getElementsByClassName("spcfy_bttn");

if (num > list_imgs.length){ CRRNT_NO = 1; }
	if (num < 1) {CRRNT_NO = list_imgs.length;}

if( OLD_NO != CRRNT_NO ){
		var old_no = OLD_NO - 1;
		list_imgs[old_no].style.display = "none";
		list_bttns[old_no].className = list_bttns[old_no].className.replace(" active", "");
	}

var crrnt_no = CRRNT_NO - 1;
	list_imgs[crrnt_no].style.display = "block";
	list_bttns[crrnt_no].className += " active";

OLD_NO = CRRNT_NO;
	SETTIMEOUT_ID = setTimeout( slide_Imgs_wait, WAIT_SEC*1000 );
}

function  slide_Imgs_wait() {
	CRRNT_NO += 1;
	slide_Imgs( CRRNT_NO );
	SETTIMEOUT_ID = setTimeout( slide_Imgs_wait, WAIT_SEC*1000 );
}