【JavaScript】スライドショーにフェード効果とランダム表示アレンジ

2021.07.212024.07.09

こちらの記事の続き、というかアレンジです。

ブラウザ上でBGM付きのスライドショーを作成しましたが、画像の切り替えにフェードの効果がほしいところ。それと画像をランダム順に表示できるのもいいなと考えてアレンジしました。

プログラムの内容
プログラミング (HTML, CSS, JavaScript)
1. フェードの効果
2. 画像をランダム順で表示

プログラムの内容

こちらがサンプルページです。

javascript-slideshow2 ダウンロード

前回と大きく違うのは画像の切り替わりがフェードになったことと、画像の順番がランダムになったことです。

細かいところではBGMが無いのと、ページを開いたら自動的に開始して一時停止と再開の機能は持たせていません。

イメージとしてはサイトのヘッダー画像が時間の経過と共に切り替わっていく演出にそのまま使えるようなものを考えました。

プログラミング (HTML, CSS, JavaScript)

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>スライドショー</title>
    <script>
        // 画像ファイルを配列で管理
        var imageArray = ["00.jpg","01.jpg","02.jpg","03.jpg","04.jpg","05.jpg"];
        // 配列の並びをシャッフル
        for(var i = (imageArray.length - 1); 0 < i; i--){
            // 0〜(i+1)の範囲で値を取得
            var r = Math.floor(Math.random() * (i + 1));
            // 要素の並び替えを実行
            var tmp = imageArray[i];
            imageArray[i] = imageArray[r];
            imageArray[r] = tmp;
        }
        // 変数
        var currentImage = 0;   // 画像インデックス
        var timerId;            // タイマーID
        var fadeFlg = 0;        // フェードフラグ
        // スライドショーを開始
        function startSlideShow() {
            // 最初の画像を表示
            changeImage();
            // タイマー開始
            timerId = setInterval("changeImage()", 10000);
        }
        // 画像を順に切り替える
        function changeImage() {
            // 画像を表示
            showImage(currentImage);
            // 画像インデックスをインクリメント
            currentImage++;
            // 画像インデックスが画像数と一致したら先頭に戻す
            if (currentImage == imageArray.length) currentImage = 0;
            fadeFlg = (fadeFlg==0) ? 1 : 0;
        }
        // 画像を表示
        function showImage(imageNo) {
            // 画像の切り替え
            if (fadeFlg == 0) {
                document.getElementById("idshow1").src = imageArray[imageNo];
                document.getElementById("idshow1").className = "fadein";
                document.getElementById("idshow2").className = "fadeout";
            } else {
                document.getElementById("idshow2").src = imageArray[imageNo];
                document.getElementById("idshow1").className = "fadeout";
                document.getElementById("idshow2").className = "fadein";
            }
        }
    </script>
    <style>
        body {
            background: #000000;
        }
        .fadeout,
        .fadein {
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            height: auto;
            width: auto;
            max-width: 100%;
            max-height: 100%;
            margin: auto;
            transition: 3s ease-in-out;
            -webkit-transition: 3s ease-in-out;
        }
        .fadeout {
            opacity: 0;
        }
        .fadein {
            opacity: 1;
        }
    </style>
</head>
<body onload="startSlideShow()">
    <img src="" id="idshow1" class="fadeout">
    <img src="" id="idshow2" class="fadein">
</body>
</html>