トップへ戻る
BLOGS

JS 自作スライドショー制作まとめ③(フワッとスライド)

JS 自作スライドショー制作まとめ③(フワッとスライド)


はい。

今回はJavaScript、CSSのみを使用した、スライドショーの制作記録をまとめていきます。

スライドショーの種類ごとにコードの記録をそのまま残して行こうと思います

というのもスライドショーはどのサイトでも見られるほどメジャーなアニメーションですが、今の所私のサイトでは実用に至る箇所がなかったため、

せっかく覚えたものをそのままコピペできるように残しておこうと思います。

自動でふわっとゆっくり画像が変わるスライダー

ということで考え方から、

これを実現するためにはCSSで透明度を0にした状態ですべての画像を同じ場所に固めておく必要があります。

<section class="slide">
    <img src="img/teien1.jpg">
    <img src="img/teien2.jpg">
    <img src="img/teien3.jpg">
    <img src="img/teien4.jpg">
    <img src="img/teien5.jpg">
    <img src="img/teien6.jpg">
  </section>
  <p>
    表示時間:<input type="range" id="slide_speed" value="7000" min="100" max="10000">
  </p>

HTMLは説明不要なぐらい簡単です

ただ今回は画像下部にレベルゲージを設けてこれでスライドショーの時間を変更出来るようにしたいと思います

CSSもシンプルです

// フワッとスライド
.slide {
	position:relative;
	height:400px;
  & + p {
    text-align: center;
  }
}
.slide img {
	position:absolute;
	opacity:0;
	transition:all 1s ease-in-out;
	height:100%;
	object-fit:contain;
       left: 50%;
       transform: translate(-50%);
}

ポイントとなるのは画像の親要素に対して

position:relative;を指定し高さも固定する、

そして子要素である画像にはposition:absolute;として全要素にピッタリと重ねます

そしてopacity:0;ですべてを透明にしています

後はJavaScriptで順番に透明度を解除していきます

関数を定義して、毎回要素を取得するようにする

function viewSlide(className, slideNo = -1) {
let imgArray = document.querySelectorAll(className);
}

さてこの中の処理でスライドをコントロールしましょう

クエリーセレクターオールで毎回要素を取得し処理を繰り返すことで順番に切り替えれるようにします

slideNo = -1として初期値をマイナスにしているのは、

配列の要素から取得してくるためです

slideNo++;
  imgArray[slideNo].style.opacity = 1;

まず必須なのがslideNo++;で毎回のループの回数をカウントすることです

もうおなじみでcounterとかでも分かりやすいですね

そしてその順番でimgArray[slideNo].style.opacity = 1;画像の透明度を戻してあげます

次に最初と最後の条件分岐の追加です

if (slideNo >= 0) {
    imgArray[slideNo].style.opacity = 0;
  }
  slideNo++;
  if (slideNo >= imgArray.length) {
    slideNo = 0;
  }
  imgArray[slideNo].style.opacity = 1;

まず最初の条件でslideNo >= 0としてすべてのスライドを透明にしています

そしてslideNo++;でプラスされ最初の画像が表示できるようになります

次にslideNo >= imgArray.lengthで配列の長さ分ループしたら最初に戻るように番号を代入し直します

次に時間の設定です

input rangeの値を取得して変数化する

let msec =
    document.getElementById("slide_speed").max -
    document.getElementById("slide_speed").value;

現在の値はvalue;で取ることが出来ますそしてそれをそのままsetTimeoutの引数にするとダイヤルを左にやるほど早くなるというややわかりにくい使用になってしまうため最大値である.maxから現在の値をマイナスすることで余りの数値となりこれを逆転することが出来ます

setTimeout(function () {
    viewSlide(className, slideNo);
  }, msec);

もちろん外でsetIntervalでも問題ありません

最後に画面ロード時にこの関数を実行するようにします

window.addEventListener("load", function () {
  viewSlide(".slide img");
});

ちょっとJSは難しかったかな

タイマー系のメソッドはわかりにくくてしょうがない、私もなんとなくの理解であるためどこかで勉強して記事にしたいですね

最後に完成したコード(JS)を貼っておきます

// フワッとスライド
window.addEventListener("load", function () {
  viewSlide(".slide img");
});
function viewSlide(className, slideNo = -1) {
  let imgArray = document.querySelectorAll(className);
  if (slideNo >= 0) {
    imgArray[slideNo].style.opacity = 0;
  }
  slideNo++;
  if (slideNo >= imgArray.length) {
    slideNo = 0;
  }
  imgArray[slideNo].style.opacity = 1;
  let msec =
    document.getElementById("slide_speed").max -
    document.getElementById("slide_speed").value;
  setTimeout(function () {
    viewSlide(className, slideNo);
  }, msec);
}

コメントをお待ちしております

お気軽にコメントをどうぞ。

CAPTCHA