いただいたイラストに作者様のお名前をつけるスライドショーブラウザソース

2022年6月29日 22:21

はじめに

OBSやStreamLabsでスライドショーを使って、いただいたイラストを表示しているけど、作者様の名前も一緒に表示したい時に使うブラウザソースを作りました。
・HTMLとCSSチョトワカル
・HTMLとCSS作るのめんどくさ
な方々向けです。
作りはわかる人が見ると雑なので目を瞑っていただけると幸いです。

使い方

①メモ帳を開いて、下のを全てコピーペーストして、
　「(好きな名前).html」で保存してください。

<!DOCTYPE html>
<html>
 <head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width">
   <title>SlideShowWithName</title>
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
 </head>
 <body style="background-color: transparent;">
   <script type="text/javascript"></script>
   <div class="slide">
        <div>
            <!-- 1920x1080のウィンドウを想定 -->
            <table style="table-layout: fixed; margin: auto;"><tr><td style="width: 1920px; height: 900px;">
                <img id="pic" style="max-width: 1920px; max-height: 900px;" />
            </td></tr>
            <tr><td style="width: 1920px; height: 100px;">
                <span id="name" class="text"></span>
            </td></tr></table>
        </div>
   </div>
   <script>
        // ###########################
        // 画像フォルダ指定
        // ###########################
        const imgFolder = 'C:\\sample\\picture';
        
        // ###########################
        // 画像ファイル一覧指定
        // ###########################
        let imgAndName = [
            ['sample1.jpg', '作者様'],
            ['sample2.gif', '作者様'],
            ['sample3.png', '作者様']
        ];

        let count = -1;

        $(function() {
            picChange();
        });

        function picChange() {
            count++;
            // カウントが最大になれば初期値に戻す
            if (count == imgAndName.length) {
                 count = 0;
            }
            // フェードアウト1秒
            $('.slide').fadeOut(1000);
            // フェードアウトの1秒を待ってから画像切り替え
            setTimeout(function(){
                $('#pic').attr('src', imgFolder + '\\' + imgAndName[count][0]);
                $('#name').text(imgAndName[count][1] + '様');
            }, 1000);
            // フェードイン1秒
            $('.slide').fadeIn(1000);
            //5秒ごとに実行
            setTimeout("picChange()", 5000);
        }
   </script>
   <style type="text/css">
        .slide {
        position: block;
        text-align: center;
        }
        /* ############## */
        /* 下部の文字の設定 */
        /* ############## */
        .text{
            font-family: "メイリオ";
            color: white;
            font-size: 150px;
            font-weight: bold;
        }
    </style>
 </body>
</html>