5つの画像を順番にフェード表示するサンプルコード。
なお、画像サイズが表示領域と異なる場合を想定したコードです。
表示領域をレクタングル（300px x 250px）で指定し、サイズが異なる場合は拡大縮小で見切れるようにしています。
HTML
<ul class="banner-rotator">
<li>
<a href="#"><img src="画像パス1" alt="画像説明1"></a>
</li>
<li>
<a href="#"><img src="画像パス2" alt="画像説明2"></a>
</li>
<li>
<a href="#"><img src="画像パス3" alt="画像説明3"></a>
</li>
<li>
<a href="#"><img src="画像パス4" alt="画像説明4"></a>
</li>
<li>
<a href="#"><img src="画像パス5" alt="画像説明5"></a>
</li>
</ul>CSS
.banner-rotator{
position: relative;
width: 300px;
height: 250px;
margin: 0 auto;
overflow: hidden;
}
.banner-rotator li{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
height: 100%;
opacity: 0;
transition: opacity 1s ease-in-out;
}
.banner-rotator li img{
width: 100%;
height: 100%;
object-fit: cover;
}JavaScript
<script>
document.addEventListener("DOMContentLoaded", function () {
const items = document.querySelectorAll(".banner-rotator li");
let index = 0;
function showNextBanner() {
items.forEach((item, i) => {
item.style.opacity = i === index ? 1 : 0;
});
index = (index + 1) % items.length;
}
showNextBanner(); // 最初のバナー表示
setInterval(showNextBanner, 5000); // 5秒ごとに切り替え
});
</script>※解説ページのコードを応用しています。