スライドショーの時限バナー

実現したいこと

ここに実現したいことを箇条書きで書いてください。

・バナーをスライドショーで一枚ずつ表示
・バナーは全て日時によって表示非表示させる
・リピート表示

前提

すみません、js素人です。
楽天バナーをスライドショーで見せたいです。
日時によって、それぞれ表示非表示させたいのですが、
スライドショーにすると日時関係なく全てが表示されてしまいます。

該当のソースコード

<!DOCTYPE html>
<html>
<head>
    <style>
        .banner {
            display: none;
        }
    </style>
</head>
<body>
    <div id="slideshow">
        <img class="banner" src="banner1.jpg" alt="Banner 1">
        <img class="banner" src="banner2.jpg" alt="Banner 2">
        <img class="banner" src="banner3.jpg" alt="Banner 3">
        <img class="banner" src="banner4.jpg" alt="Banner 4">
        <img class="banner" src="banner5.jpg" alt="Banner 5">
    </div>

    <script>
        // 表示するバナーの日時を定義します
        var bannerSchedule = [
            { startTime: new Date('2023-06-16T08:00:00'), endTime: new Date('2023-06-16T10:00:00'), index: 0 },  // バナー1の表示時間帯
            { startTime: new Date('2023-06-16T10:00:00'), endTime: new Date('2023-06-16T12:00:00'), index: 1 },  // バナー2の表示時間帯
            { startTime: new Date('2023-06-16T12:00:00'), endTime: new Date('2023-06-16T14:00:00'), index: 2 },  // バナー3の表示時間帯
            { startTime: new Date('2023-06-16T14:00:00'), endTime: new Date('2023-06-16T16:00:00'), index: 3 },  // バナー4の表示時間帯
            { startTime: new Date('2023-06-16T16:00:00'), endTime: new Date('2023-06-16T18:00:00'), index: 4 }   // バナー5の表示時間帯
        ];

        // 現在の時刻と比較して表示するバナーを切り替えます
        function updateBanner() {
            var currentTime = new Date();
            var bannerContainer = document.getElementById('slideshow');
            var banners = bannerContainer.getElementsByClassName('banner');

            // 全てのバナーを非表示にします
            for (var i = 0; i < banners.length; i++) {
                banners[i].style.display = 'none';
            }

            for (var i = 0; i < bannerSchedule.length; i++) {
                var schedule = bannerSchedule[i];
                if (currentTime >= schedule.startTime && currentTime < schedule.endTime) {
                    banners[schedule.index].style.display = 'block';
                }
            }

            // スライドショーの表示を設定します
            setTimeout(nextSlide, 5000); // 5秒ごとに次のスライドを表示
        }

        // 次のスライドを表示します
        function nextSlide() {
            var bannerContainer = document.getElementById('slideshow');
            var banners = bannerContainer.getElementsByClassName('banner');
            var currentIndex = -1;

            for (var i = 0; i < banners.length; i++) {
                if (banners[i].style.display === 'block') {
                    currentIndex = i;
                    break;
                }
            }

            if (currentIndex >= 0) {
                banners[currentIndex].style.display = 'none';

                if (currentIndex === banners.length - 1) {
                    currentIndex = 0; // 最後のスライドなら最初のスライドに戻る
                } else {
                    currentIndex += 1; // 次のスライドを表示
                }
            } else {
                currentIndex = 0; // 最初のスライドを表示
            }

            banners[currentIndex].style.display = 'block';

            // スライドショーをリピートします
            setTimeout(nextSlide, 5000); // 5秒ごとに次のスライドを表示
        }

        // ページロード時にバナーを初期更新します
        updateBanner();
    </script>
</body>
</html>