このサイトの背景をフェードイン・アウトで切り替えている、そのスクリプトを記録しておきます。
jQueryでつくった初めてのプラグインです。
Githubはこちら → Billies BK Change
HTML
<!doctype html>
<html lang=”ja”>
<head>
<meta charset=”utf-8″>
<title>背景のフェードインフェードアウト</title>
<link rel=”stylesheet” href=”style.css”>
<script src=”//code.jquery.com/jquery-3.3.1.min.js”></script>
</head>
<body>
<header id=”bkimage”>
<h1>背景をフェードで切り替える</h1>
</header>
<p>フェードのスピードと背景切替の時間はオプションで指定できます。</p>
<p>画像は、配列で指定。</p>
<p>例） var images = [‘img01.jpg’, ‘img02.jpg’, ‘img03.jpg’]; </p>
<p>オプションは、{キー：値}の形式で指定。</p>
<p>例） var options = {speed: 3000, times: 5000};</p>
<p>これを、以下のようにして、渡す。<br>
jQuery(‘#haikei’).bgchanger(images, options);</p>
<footer>
<small>© 2018 Seiichi Nukayama</small>
</footer>
<script src=”//code.jquery.com/jquery-3.3.1.min.js”></script>
<script src=”billies.bkchange.js”></script>
<script>
var images = [‘img/bak1.jpg’, ‘img/bak2.jpg’, ‘img/bak3.jpg’];
var options = {speed: 5000, times: 7000};
jQuery(‘#bkimage’).bgchanger(images, options);
</script>
</body>
</html>
CSS
#bkimage {
position: relative;
padding-top: 0;
margin-bottom: 0.5rem;
}
#bkimage .slides {
position: absolute;
width: 100%;
height: 100%;
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
z-index: -1;}
#bkimage .slides:not(:first-child) {
display: none;
}#bkimage h1 {
padding-top: 500px;
padding-bottom: 50px;
}
jQuery
;(function($) {
‘use strict’;/**
* @param: bgArray <Array>
*
*/$.fn.bgchanger = function(bgArray, options) {
options = $.extend({
speed: 3000,
times: 5000
}, options);var target = this;
$.each(bgArray.reverse(), function(i, value) {
$(target).prepend(‘<div class=”slides” style=”background-image:url(‘ + value + ‘);”></div>’);
});var bgNo = 1;
var bgLength = bgArray.length;
setInterval(function() {
$(target).children(‘.slides:nth-child(‘ + bgNo + ‘)’).fadeOut(options.speed);
$(target).children(‘.slides:nth-child(‘ + (bgNo === bgLength ? 1 : bgNo + 1) + ‘)’).fadeIn(options.speed/3);
if (bgNo >= bgLength) {
bgNo = 1;
} else {
bgNo += 1;
}
}, options.times);return this;
};
})(jQuery);
