先月、友人の紹介で、新しいショップの立ち上げに人が足りないから
手伝って欲しいとの依頼を受け、なんだかんだとバタバタしていて、
bottleの勉強は、少し停滞気味です。

でも、その作業の中で、
元々使用していた日時指定でバナーを切り替える
Javascriptを整理したので公開。
全ての自動化は無理だけど、お金をかけずに
月に２回程度、マラソン前に少し手を加える程度で
更新をサボっていない感のでるscriptです。

<script type="text/javascript" src="js/slick.min.js"></script>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript">
$(window).on('load', function() {
    var i=0;
    var image =[];
    var link=[];
    var startday =[];
    var endday = [];
    
//
//   ここから更新可能エリア
//
    // image     →  楽天RMS Imageurl
    // link      →  リンク先
    // startday  →  開始日時 ( yyyy:mm:dd hh:mm )
    // endday    →  終了日時 ( yyyy:mm:dd hh:mm )

    //  ワンダフルデイ（毎月１日）
    image[i] ="https://image.rakuten.co.jp/xxxxxxxxx/cabinet/event/monthly_x3.gif";
    link[i] = "https://event.rakuten.co.jp/campaign/point-up/wonderfulday/";
    startday[i] = new Date('2021/10/01 00:00');
    endday[i] = new Date('2021/10/01 23:55');
    i=i+1;

    //  楽天マラソン
    image[i] ="https://image.rakuten.co.jp/xxxxxxxxx/cabinet/event/marathon_pc.gif";
    link[i] = "https://event.rakuten.co.jp/campaign/point-up/marathon/";
    startday[i] = new Date('2021/10/04 20:00');
    endday[i] = new Date('2021/10/11 01:55');
    i=i+1;

    // ５、１０日のポイント５倍
    image[i] ="https://image.rakuten.co.jp/xxxxxxxxx/cabinet/event/20180305_cardx5.jpg";
    link[i] = "https://event.rakuten.co.jp/campaign/card/pointday/";
    startday[i] = new Date('2021/10/05 00:00');
    endday[i] = new Date('2021/10/05 23:55');
    i=i+1;

    image[i] ="https://image.rakuten.co.jp/xxxxxxxxx/cabinet/event/20180305_cardx5.jpg";
    link[i] = "https://event.rakuten.co.jp/campaign/card/pointday/";
    startday[i] = new Date('2021/10/10 00:00');
    endday[i] = new Date('2021/10/10 23:55');
    i=i+1;
//
// この先は編集しないでください  
//
    var today = new Date();
    var j=1;
    for(i=0;i<image.length;i++){
        if(startday[i] < today && today < endday[i] ){

            var $newImage =$("<img></img>")
            $newImage.attr("src",image[i]);

            var $newLink = $("<a></a>");
            $newLink.attr("href",link[i]);
            $newLink.attr("target","_blank");
            $newLink.append($newImage.clone());

            $("#banner_"+j).append($newLink.clone());

            j=j+1;
        }
    }
    for(i=j;i<=20;i++){
        $('#banner_'+i).remove();
    }
	$('.slider').slick('unslick');

}

Jqueryとslickを利用しているので、予め楽天GOLDにアップロードをしておいてください。
下記の部分を適宜追加するとどんどん増やせます。

    image[i] ="https://image.rakuten.co.jp/xxxxxxxxx/cabinet/event/20180305_cardx5.jpg";
    link[i] = "https://event.rakuten.co.jp/campaign/card/pointday/";
    startday[i] = new Date('2021/10/10 00:00');
    endday[i] = new Date('2021/10/10 23:55');
    i=i+1;

簡単に解説すると、
image[i]は、楽天RMSの画像ライブラリの保存場所
link[i]は、リンク先
startday[i]、endday[i]は表示開始日時と終了日時。
i=i+1 で追加や削除、順番を入れ替えても問題ない仕様にしています。

HTMLの準備側は、下記の通りで最大表示20個までバナーは追加可能
#banner_xxを利用しなくても追加できるはずなのですが、うまくかなかったので、置き換えて稼働するようにしました。なので、もし表示バナーが20を超えると当然エラーがでます ^^;
20も表示することないので、あえて制御もいれていません。

    <div class="bannerlist">
		<div id="banner_1"></div>
		<div id="banner_2"></div>
		<div id="banner_3"></div>
		<div id="banner_4"></div>
		<div id="banner_5"></div>
		<div id="banner_6"></div>
		<div id="banner_7"></div>
		<div id="banner_8"></div>
		<div id="banner_9"></div>
		<div id="banner_10"></div>
		<div id="banner_11"></div>
		<div id="banner_12"></div>
		<div id="banner_13"></div>
		<div id="banner_14"></div>
		<div id="banner_15"></div>
		<div id="banner_16"></div>
		<div id="banner_17"></div>
		<div id="banner_18"></div>
		<div id="banner_19"></div>
		<div id="banner_20"></div>
    </div>