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

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

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

> * [bxSlider: レスポンシブコンテントスライダー | deadwood](https://www.d-wood.com/blog/2014/05/30_6280.html)

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

> * [jQueryで自作する時の考え方：スライドショーの作り方](http://blog.nico0927.net/20120728/jquery/687)

## ソース

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

“`html:slideshow.html

“`

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

“`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 させています。

> * [:visible Selector | jQuery API Documentation](http://api.jquery.com/visible-selector/)

“`javascript: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` で、セレクタで指定した要素のうち最初に登場した子要素を指定。
これで最初の画像に戻しています。

> * [:first-child Selector | jQuery API Documentation](http://api.jquery.com/first-child-selector/)
> * [jQueryにおける:first-childと:firstの違い – to-R](http://blog.webcreativepark.net/2010/05/24-204623.html)

HTML と CSS で用意した物を操作すると。
[/markdown]