1. スライドショーとは？
スライドショー は、時間がたつと自動で画像がかわるしくみです。
ホームページの「ヒーロー画像」などでよく使われます。
2. 完成のイメージ
スライドショーの例（自動で切り替え）
3. HTMLのコード
まずは画像を<body>の<section class="hero">に上書きしましょう。画像は3枚ならべましょう。いちばん上の画像に class="active" をつけて、最初に表示させます。
<section class="hero">
<img src="photo1.jpg" class="active" alt="1枚目の写真">
<img src="photo2.jpg" alt="2枚目の写真">
<img src="photo3.jpg" alt="3枚目の写真">
</section>
ここでは画像ファイル名を photo1.jpg などにしています。
（あなたの画像に置きかえてOKです）
4. JavaScript の コード
JSは<script></script>の最後に入れます
// すべての画像を さがす
const slides = document.querySelectorAll('.hero img');
let current = 0;
// 3秒ごとに つぎの画像へ
setInterval(() => {
// 今の画像を消す
slides[current].classList.remove('active');
// つぎの画像（さいごなら 0 にもどる）
current = (current + 1) % slides.length;
// 新しい画像を表示
slides[current].classList.add('active');
}, 3000);
setInterval() は「時間がたつごとに くりかえす」しくみです。3秒ごとに画像を1つずつ切りかえます。
5. CSSの しかけ
cssは<head></head>の中の<style></style>の中に入れる。
.hero {
position: relative;
width: 100%;
height: 300px;
overflow: hidden;
border-radius: 12px;
}
.hero img {
position: absolute;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0;
transition: opacity 1s ease;
}
.hero img.active {
opacity: 1;
}
opacity（すけ具合）と transition を使って、なめらかに画像がかわります。
6. まとめ
- JavaScriptで「時間を使った動き」ができる。
- CSSで「見た目の動き」を表現できる。
- この2つを合わせると、ホームページらしい動きが作れます。