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

2017/10/18

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

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

以前のエントリ「ブラウザ幅いっぱい広がるビジュアル」では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の数が増えれば自動でスライドショーも増えるので更新も楽。

デモページ