Slide Show

　このページでは背景をスライドショー化する方法を解説します。

HTML

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

動作の確認

CSSあり scriptあり別ページで開きます。

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

css

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

* {box-sizing:border-box}

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

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

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

.imgs_cntnr .img_box {
  display: block;
	width:100%;
	height: 600px;
}

/* 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: #8c8b8b;
}

JavaScript

var CRRNT_NO = 1;
var OLD_NO = 1;
var src_list = ['img/9542662039_n.jpg', 'img/8157760398_n.jpg', 'img/8998062075_n.jpg'];

window.onload = function(){
  slide_Imgs(CRRNT_NO);
};

// 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 ) {
  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 (num > src_list.length){ CRRNT_NO = 1; }
	if (num < 1) {CRRNT_NO = src_list.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 = String( CRRNT_NO - 1 );
//  list_imgs[crrnt_no].style.display = "block";
	list_imgs[0].style.backgroundImage = "url('" + src_list[crrnt_no] + "')";
/* not exec fade out fade in */

list_bttns[crrnt_no].className += " active";

OLD_NO = CRRNT_NO;
}