javascriptとcssでつくるシンプルなフェードイン・フェードアウトのスライダー

デモはこちら。

ソースコード

html

<div id="slider">
	<img src="img/1.png">
	<img src="img/2.png">
	<img src="img/3.png">
</div>

css

#slider {
	position: relative;
}
#slider img {
	position: absolute;
	top: 0;
	left: 0;
	opacity: 0;
	transition: .8s;
}
#slider img.show {
	opacity: 1;
}

javascript

// 時間の指定
var timer = 3000;

// スライドする要素を取得
var imgs = document.querySelectorAll('#slider img');

// 最初の画像を表示
imgs[0].classList.add('show');

// 画像の番号
var imgNum = 0;
function showImg () {
	for (var i = 0; i < imgs.length; i++) {
		imgs[i].classList.remove('show');
	}
	if (imgNum >= imgs.length - 1) {
		imgNum = 0;
	} else {
		imgNum++;
	}
	imgs[imgNum].classList.add('show');
	showImgTimer();
}
function showImgTimer () {
	setTimeout(showImg, timer);
}
showImgTimer()

ソース説明

画像は position で同じ位置に重ねて、opacity: 0; で非表示にしておきます。

.show というクラスをつけることで、 画像を表示するようにします。
.show には opacity: 1; が書いてあります。

一定時間ごとに .show を付け外しするように javascript を書いています。

フェードイン・フェードアウトは、transiton で設定します。

とてもシンプルなスライダーです。

アイコンはこちらから使用しました。