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

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

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

スポンサーリンク

プログラムの内容

https://www.iehohs.com/files/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>

フェードの効果

http://cya.sakura.ne.jp/java/sshow2.htm

フェードはこのサイトを参考にしました。

フェードの効果そのものはCSSのtransitionで行っており、.fadeoutと.fadeinでどちらが前面に来るかを設定、あとはJavaScriptで画像のURLを動的に挿入するという流れですね。

画像をランダム順で表示

https://gray-code.com/javascript/shuffle-for-item-of-array/

ランダム表示はこのサイトを参考にしました。

最初に画像URLを配列に入れているのですが、この順番をランダムで並び替えるというもの。

ページを開いた際に1回だけ並び替えを行うので、開く度に順番は変わりますが、2周目以降も同じ順番で表示されます。

コメント

タイトルとURLをコピーしました