<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>画像ボタン完成版</title>
<meta name="viewport" content="width=393, initial-scale=1.0">
<style>
body {
margin: 0;
padding: 0;
}
/* 画面全体 */
.screen {
width: 393px;
height: 852px;
position: relative;
overflow: hidden;
background-size: cover;
background-position: center;
transition: background-image 0.6s ease-in-out;
}
/* フェード用レイヤー（上にかぶせる） */
.fade {
position: absolute;
inset: 0;
background-size: cover;
background-position: center;
opacity: 0;
transition: opacity 0.8s ease;
pointer-events: none;
}
/* ボタン本体 */
.image-button {
width: 277px;
height: 69px;
position: absolute;
left: 58px;
top: 584px;
position: relative;
cursor: pointer;
}
.btn-img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.image-button:active {
opacity: 0.8;
transform: scale(0.98);
}
</style>
</head>
<body>
<div class="screen" id="screen">
<div class="fade" id="fade"></div>
<!-- ロゴ -->
<img
src="./logo.png"
style="
width: 436px;
height: 291px;
position: absolute;
left: -13px;
top: 8px;
"
>
<!-- 画像ボタン -->
<button class="image-button" onclick="onTapButton()">
<img src="./start.png" class="btn-img">
</button>
</div>
<script>
const images = [
"./top1.png",
"./top2.png",
"./top3.png",
"./top4.png",
"./top5.png"
];
let index = 0;
const screen = document.getElementById("screen");
const fade = document.getElementById("fade");
// 初期表示
screen.style.backgroundImage = `url(${images[0]})`;
setInterval(() => {
index = (index + 1) % images.length;
// 次画像をフェードレイヤーにセット
fade.style.backgroundImage = `url(${images[index]})`;
fade.style.opacity = 1;
// フェード完了後に背景を切り替え
setTimeout(() => {
screen.style.backgroundImage = `url(${images[index]})`;
fade.style.opacity = 0;
}, 800);
}, 4000); // ← 4秒ごとに切り替え
</script>
</body>
</html>
