フル画面のスライドショー
ブラウザ画面いっぱいに広がるスライドショーです。
結構楽しかった。
以前のエントリ「ブラウザ幅いっぱい広がるビジュアル」ではloadされた時とresizeされた時にブラウザ縦幅を取ってきていましたが、今回はloadのみ。
読み込み時が気持ち悪いので、loading画面とか設定すれば良いと思います。
HTML
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 | 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)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 | /*----------------------------------------------------------------------*/ /*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の数が増えれば自動でスライドショーも増えるので更新も楽。
