javascriptとcssでつくるシンプルなフェードイン・フェードアウトのスライダー
- 2020.05.31
- css javascript 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 で設定します。
とてもシンプルなスライダーです。
アイコンはこちらから使用しました。
-
前の記事
シンプルなタイマー機能のChrome拡張をつくってみた(簡単) 2020.05.16
-
次の記事
ドラッグを判定するjavascript 2020.06.07