うわー！もう今月終わりそう！
というわけで、Scala の学習のほうはここひと月ほど滞っているんだけど、代わりに（？）今日は、HTML と JavaScript でタイトルに書いたようなことをやってみる。
jQuery を使ってスライドショーを実現するライブラリはいろいろあるんだけど、今日はそういうのは使わないでやる。さらには、jQuery 自体も使わないでやる。やるって言ったらやる。
さて、まずは jQuery 利用バージョン。いくつかの Web ページを参考に書いた（というかほぼコピペ）のがこれ。
<!DOCTYPE html>
<html>
<head>
<title>Fade images</title>
<link rel="stylesheet" href="style.css" />
<script src="../lib/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
$(function() {
const $width = 960;
const $height = 540;
const $interval = 3000;
const $fade_speed = 1000;
$("#slide ul li").css({"position": "absolute", "overflow": "hidden", "width": $width, "height": $height});
$("#slide ul li").hide();
$("#slide ul li:first").addClass("active").show();
setInterval(function() {
let $active = $("#slide ul li.active");
let $next = $active.next("li").length ? $active.next("li") : $("#slide ul li:first");
$active.fadeOut($fade_speed).removeClass("active");
$next.fadeIn($fade_speed).addClass("active");
}, $interval);
});
</script>
</head>
<body>
<div id="slide">
<ul>
<li><a href=""><img src="img/img1.jpg" width="960" heght="540"/></a></li>
<li><a href=""><img src="img/img2.jpg" width="960" heght="540"/></a></li>
<li><a href=""><img src="img/img3.jpg" width="960" heght="540"/></a></li>
<li><a href=""><img src="img/img4.jpg" width="960" heght="540"/></a></li>
</ul>
</div>
</body>
</html>
これで、3秒ごとにフェードアウト/フェードインしながら画像が切り替わる。画像は4つ用意したけど、最後まで行ったら元に戻る。
つぎ。jQuery なしバージョン。さらにいくつかのページを参考に、試行錯誤した結果がこれ。
<!DOCTYPE html>
<html>
<head>
<title>Fade images</title>
<link rel="stylesheet" href="style.css" />
<script type="text/javascript">
function fadeIn(el, speed) {
el.style.transition = speed;
el.style.opacity = "1";
}
function fadeOut(el, speed) {
el.style.transition = speed;
el.style.opacity = "0";
}
function slide() {
const width = "960px";
const height = "540px";
const interval = 3000; // miliseconds
const fade_speed = "1.0s";
const slide = document.querySelectorAll("#slide ul li");
for (let i =0; i < slide.length; i++) {
slide[i].style.position = "absolute";
slide[i].style.overflow = "hidden";
slide[i].style.width = width;
slide[i].style.height = height;
slide[i].style.display = "block";
slide[i].style.opacity = "0";
}
const first = slide[0];
first.classList.add("active");
first.style.opacity = "1";
setInterval(function() {
let active = document.querySelector("#slide ul li.active");
let next = active.nextElementSibling || first;
fadeOut(active, fade_speed)
active.classList.remove("active");
fadeIn(next, fade_speed)
next.classList.add("active");
}, interval);
}
document.addEventListener("DOMContentLoaded", slide);
</script>
</head>
<body>
<div id="slide">
<ul>
<li><a href=""><img src="img/img1.jpg" width="960" heght="540"/></a></li>
<li><a href=""><img src="img/img2.jpg" width="960" heght="540"/></a></li>
<li><a href=""><img src="img/img3.jpg" width="960" heght="540"/></a></li>
<li><a href=""><img src="img/img4.jpg" width="960" heght="540"/></a></li>
</ul>
</div>
</body>
</html>
動作は同じ。
最近の流れとしては jQuery 使わないっていうのがあるみたいだけど、やっぱ使ったほうが楽ではあるよなあ。