[jQuery] fadeIn / fadeOut するコンテントスライダーを自作する

公開日: 2014/07/07
更新日: 2018/11/14

div スライダーともいうよう。

プラグインを使ったところ、ぶつかるところがありました。

利用したい機能が限られていたので、チュートリアル見ながら自作した方が良いかもと探して、こちらで勉強しました。

ソース

HTML でスライド用の画像を並べておき、div で囲んでおく。

slideshow.html
<div id="slideshow" class="slideshow">
  <p class="boxes box1"><img src="/img/photo-01.jpg" alt="photo 1"></p>
  <p class="boxes"><img src="/img/photo-02.png" alt="photo 2"></p>
  <p class="boxes"><img src="/img/photo-03.png" alt="photo 3"></p>
</div>

並べた画像を CSS で同じ座標に重ねて、最初の画像以外を隠しておく。

style.scss
.slideshow {
  position: relative;
  background-color: #000;
  width: 630px;
  height: 340px;
  img {
    width: auto;
    height: 340px;
  }
  .boxes {
    position: absolute;
    display: none;
  }
  .box1 {
    display: block;
  }
}

表示している画像を jQuery の :visible で選択して fade させています。

slideshoe.js
var nowVisibleBox = 1;
var wrapper = $('div#slideshow');
var countBoxes = $('.boxes').size();
var intervalTime = 8000;
var fadeTime = 1200;
function slideShow() {
  'use strict';
  if (nowVisibleBox === countBoxes) {
    wrapper.find('p:visible').fadeOut(fadeTime);
    wrapper.find('p:first-child').fadeIn(fadeTime);
    nowVisibleBox = 1;
  } else{
    wrapper.find('p:visible').fadeOut(fadeTime);
    wrapper.find('p:visible').next().fadeIn(fadeTime);
    nowVisibleBox++;
  }
}
$(function() {
  'use strict';
  setInterval(function() {
    slideShow();
  }, intervalTime);
});

:first-child で、セレクタで指定した要素のうち最初に登場した子要素を指定。
これで最初の画像に戻しています。

HTML と CSS で用意した物を操作すると。