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