フル画面のスライドショー

ブラウザ画面いっぱいに広がるスライドショーです。
結構楽しかった。

以前のエントリ「ブラウザ幅いっぱい広がるビジュアル」ではloadされた時とresizeされた時にブラウザ縦幅を取ってきていましたが、今回はloadのみ。
読み込み時が気持ち悪いので、loading画面とか設定すれば良いと思います。

HTML

<header class="header">
    <ul class="slide">
        <li><img src="img/demo/171018_1.jpg" alt=""></li>
        <li><img src="img/demo/171018_2.jpg" alt=""></li>
        <li><img src="img/demo/171018_3.jpg" alt=""></li>
        <li><img src="img/demo/171018_4.jpg" alt=""></li>
    </ul>
    <p>loadするごとにブラウザの縦幅を測定します</p>
</header>
<main class="demo_main">
    <div class="div1"></div>
    <div class="div2"></div>
    <div class="div3"></div>
</main>

CSS

body{
    margin: 0;
    padding:0;
}
.demo_main p{
    text-align: center;
    font-size: 20px;
}
ul{
    list-style-type: none;
    margin:0;
    padding: 0;
}
.div1{
    height: 300px;
    background: #ccc;
}
.div2{
    height: 300px;
    background: #ddd;
}
.div3{
    height: 300px;
    background: #fff;
}
.header {
  position: relative;
}
.header p{
    position: absolute;
    text-align: center;
    width: 100%;
    top: 50%;
    bottom: 50%;
    font-size: 30px;
    color: #fff;
    z-index: 10;
}
.header .slide {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}
.header .slide img{
    visibility: hidden;
    height: 0;
    width: 0;
}
.header .slide li {
  position: absolute;
  display: none;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-size: cover;
}

javascript(jQuery)

 /*----------------------------------------------------------------------*/
    /*headerの縦幅
    /*----------------------------------------------------------------------*/
    $(function () {
        //loadされたらブラウザの縦幅を取ってきて.headerに効かせる
        $(window).on('load', function () {
            var heght = $(window).height();
            $('.header').css('height', heght + 'px');
        });
    });

    /*----------------------------------------------------------------------*/
    /*slide
    /*----------------------------------------------------------------------*/

    $(function () {
        var slide = $('.slide');
        var slide_one = $('.slide>li');
        var slide_one_first = $('.slide li:first-child');


        // .slide>liの数を取得しimgをbackgroundにする
        //  slide_one.lengthで.slide>liの数を取得。liが増えても大丈夫
        var all_li = slide_one.length;

        //新しい配列を作る
        var img_all = new Array;
        for (var i = 0; i <= all_li; i++) {

            //.slide>liの中にあるimgをそれぞれ取得
            var slide_img = slide_one.eq(i).find('img');
            //imgのsrcを配列に格納
            img_all[i] = slide_img.attr('src');

            //それぞれの.slide>liにimgをbackgroundとして効かせる
            slide_one.eq(i).css('background-image', 'url(' + img_all[i] + ')');
        }

        //スライド
        $(window).on('load', function () {

            var fadeSpeed = 8000;
            // 切り替わりの間隔（ミリ秒）
            var switchDelay = 1000;
            //  フェード処理の早さ（ミリ秒）

            //  .slide li:first-childにactiveというclassをつけてshowする
            //  ※cssで予めslide liにはdisplay:noneが掛かっている
            slide_one_first.addClass('active').show();

            setInterval(function () {
                var active = $('.slide  li.active');
                //条件演算子を使って、.slide  li.activeの次にliがあるならそれを指定(true)、
                //ないなら.slide  li:firstを指定(false)
                var next = active.next('li').length ? active.next('li') : $('.slide  li:first');

                //activeをfadeOutして、nextをfadeInする
                active.fadeOut(switchDelay).removeClass('active');
                next.fadeIn(switchDelay).addClass('active');
            }, fadeSpeed);
        });
    });

スライドのfadeSpeedとswitchDelayを変えれば切り替わりの速さを変更できます。
htmlのslide liの数が増えれば自動でスライドショーも増えるので更新も楽。

デモページ