画像を一定間隔で切り替える方法（CSS＋JavaScript）

CSS と JavaScript を利用して、複数の画像を一定間隔でフェードインしながら表示を切り替える方法です。

ページのポイントで使うとオシャレなサイト（記事）になり、読者からの好感度向上が期待できます。

1 画像を一定時間でボワっと切り替えるサンプル
2 WordPress で一定間隔での画像切り替えを実現する方法
3 まとめ

画像を一定時間でボワっと切り替えるサンプル

３枚の画像を一定時間（５秒ごと）に切り替えています。

切り替わるタイミングで、画像がフェードインします。

１枚目	丸の内のビル群とクラシックな東京駅のコントラストとライトアップが美しい
２枚目	青空を見据えて凱旋門に向かう道がかっこいい
３枚目	京都の小路、奥ゆかしさに秘める日本の美が美しい

WordPress で一定間隔での画像切り替えを実現する方法

WordPress のエディタでは、イメージをブロックごとに指定していくため、若干の工夫が必要です。WordPress での実現手順を紹介します。

■ Step.1 画像を配置してグループ化する

表示したいイメージを縦に並べて配置し、すべてのイメージを選択してグループ化します。

ポイント

配置するイメージは、同じ大きさ（高さ、幅）のイメージを用意すると、よりきれいに見えます。

■ Step.2 グループ（親）にクラス名を記載する

作成したグループ（親）を選択している状態で、グループのプロパティから「高度な設定」の「追加 CSS クラス」に「クラス名」を記載します。

ここでは仮に「myBaseChangeImg」と名付けます。

■ Step.3 イメージ（子）にクラス名を記載する

「子」として、表示を切り替えたいイメージ（オブジェクト）を個別に選択して、プロパティから「高度な設定」の「追加 CSS クラス」に「クラス名」を記載します。

ここでは仮に「myChildImage」と名付けます。

並べたイメージすべてに同じクラス名「myChildImage」を付けてください。

■ Step.4 CSSを記載する

縦に並べたイメージを同じ位置に重ね合わせるための CSS （ position ）記載します。

<style>
.myBaseChangeImg {
    position:relative;
    height:500px;
}
.myChildImage{
    position:absolute;
    opacity:0.0;
    top:0px;
    transition:all 1s ease-in-out;
}
</style>

ページに CSS を適用してください。

■ 親クラス ( myBaseChangeImg )

position:relative;	画像を重ね合わせるためのポジション指定です。
height:500px;	画像の高さに合わせて親の高さを強制指定します。

■ 子クラス（ myChildImage )

position:absolute;	画像を重ね合わせるためのポジション指定です。
opacity:0.0;	初期状態ですべての子イメージを透過状態にします。
top:0px;	すべての子イメージの上辺の始まり位置を揃えます。
transition:all 1s ease-in-out;	表示・非表示で１行かけて透過→表示（または逆）に切り替える指定です。

本文中に記載する場合は「カスタム HTML」ブロックで CSS を記載することも可能です。

■ Step.5 JavaScriptを記載する

縦に並べたイメージの表示を一定時間で切り替える JavaScript を記載します。

<script>
var myImageNo = 0;

window.addEventListener('load', function () {
    var myImgArray = document.getElementsByClassName("myChildImage");
    myImgArray[0].style.opacity = 1.0;

    setTimeout(function(){functionChangeImage();}, 5000);
});

function functionChangeImage() {
    var myImgArray = document.getElementsByClassName("myChildImage");

    myImgArray[myImageNo].style.opacity = 0.0;
    myImageNo++;
    if (myImageNo >= myImgArray.length) {
        myImageNo = 0;
    }
    myImgArray[myImageNo].style.opacity = 1.0;

    setTimeout(function(){functionChangeImage();}, 5000);
}
</script>

１個目の「5000」が、ページを表示してから最初に切り替わるまでの秒数になります。1000 で 1秒（3秒にする場合は 3000）になります。必要に応じて変えてください。

２個目の「5000」が、２回目以降に画像が切り替わる秒数になります。こちらも必要に応じて書き換えて下さい。