Javascriptで決まった期間ごとに画像を自動変更したい

Question

1年の間で3パターンの画像セットのスライダーをルーティンで自動的に切り替えたいと思っています。

• 画像3枚セットスライダー(A)（12/11〜3/10の間に表示）
• 画像3枚セットスライダー(B)（3/11〜5/10の間に表示）
• 画像3枚セットスライダー(C)（5/11〜12/10の間に表示）

大きいサイズのHERO画像が合計9枚がHTMLですべて読み込まれると遅延につながるので、$('.xxx').html(xxxxx); でJS側からHTMLを読み込む想定です。

色々と参考になるものを探し回ったのですが、見つからずご教示ください。
今回、年は関係ないので月と日で条件分岐をして、出力するHTMLを選別できたらと思っています。

【追記】
0. 表示した日を取得し

1. mm/dd の形式にする
2. 各画像のセットを表示させたい期間を定義
3. if文でそれらを比較し
4. 変数heroSlideに該当する画像HTMLを格納
5. js-heroSlideSwitchクラスにHTMLを出力する

という流れでコードを書きましたが、そもそも日付の比較をどのようにするのか、が分かりませんでした。
if(mm/dd <= mm/dd) で出来るのか、とチャレンジしてみましたが不可能でした。

年を含めた「yyyy/mm/dd」でしたら、gettime()で経過ミリ秒を比較すれば良いのでわかりやすいですが、今回は1年中の日付を見ているので経過ミリ秒も当てにならないのかなと思っていました。

<div class="js-heroSlideSwitch"></div>

var HeroMonth = new Date().getMonth()+1;
var HeroDay = new Date().getDate();

var HeroNowData = HeroMonth + '/' + HeroDay;

console.log(HeroNowData);

var aHeroStartData = new Date('12/11');
var aHeroEndData = new Date('3/10');

var bHeroStartData = new Date('3/11');
var bHeroEndData = new Date('5/10');

var cHeroStartData = new Date('5/11');
var cHeroEndData = new Date('12/10');

var heroSlide;
if( aHeroStartData <= HeroNowData >= aHeroEndData ) {
  heroSlide = heroSlide_A;
} else if( bHeroStartData <= HeroNowData >= bHeroEndData ) {
  heroSlide = heroSlide_B;
} else if( cHeroStartData <= HeroNowData >= cHeroEndData ) {
  heroSlide = heroSlide_C;
}

const heroSlide_A = 
'<ul class="p-top-heroList js-sliderHero">' +
  '<li class="p-top-heroItem">' +
    '<img src="https://example.com/images/mainimage-sp-1-1.jpg" alt="" class="p-top-heroImgSp">' +
  '</li>' +
  '<li class="p-top-heroItem">' +
    '<img src="https://example.com/images/mainimage-sp-1-2.jpg" alt="" class="p-top-heroImgSp">' +
  '</li>' +
  '<li class="p-top-heroItem">' +
    '<img src="https://example.com/images/mainimage-sp-1-3.jpg" alt="" class="p-top-heroImgSp">' +
  '</li>' +
'</ul>';

const heroSlide_B = 
'<ul class="p-top-heroList js-sliderHero">' +
  '<li class="p-top-heroItem">' +
    '<img src="https://example.com/images/mainimage-sp-2-1.jpg" alt="" class="p-top-heroImgSp">' +
  '</li>' +
  '<li class="p-top-heroItem">' +
    '<img src="https://example.com/images/mainimage-sp-2-2.jpg" alt="" class="p-top-heroImgSp">' +
  '</li>' +
  '<li class="p-top-heroItem">' +
    '<img src="https://example.com/images/mainimage-sp-2-3.jpg" alt="" class="p-top-heroImgSp">' +
  '</li>' +
'</ul>';

const heroSlide_C = 
'<ul class="p-top-heroList js-sliderHero">' +
  '<li class="p-top-heroItem">' +
    '<img src="https://example.com/images/mainimage-sp-3-1.jpg" alt="" class="p-top-heroImgSp">' +
  '</li>' +
  '<li class="p-top-heroItem">' +
    '<img src="https://example.com/images/mainimage-sp-3-2.jpg" alt="" class="p-top-heroImgSp">' +
  '</li>' +
  '<li class="p-top-heroItem">' +
    '<img src="https://example.com/images/mainimage-sp-3-3.jpg" alt="" class="p-top-heroImgSp">' +
  '</li>' +
'</ul>';

$('.js-heroSlideSwitch').html(heroSlide);

よろしくお願いいたします。

Comments

[kei344]

「何」が「どのように」わからないのか、コードのどの部分で詰まっているのかなどを、出ているエラーなどと併せて、具体的に記述されたほうが回答を得られやすいと思います。

[cotton88]

コメントありがとうございます。【追記】させていただきました。
エラーは特にでていませんでした。

Answer 1

「画面を開いているときにその期間をまたいだらどうするか」を検討する必要は一応あるのですけど、「何秒」とか「何分」のように短い時間でないのでしたら、JavaScriptで制御するよりもサーバーサイドで出力内容を制御した方が良いと思います。
なかなか、1日ずっと同じページ開きっぱなしってないでしょうし・・・。

Comments

[cotton88]

> 画面を開いているときにその期間をまたいだらどうするか

期間をまたいだ瞬間に非同期で切り替わる必要はなく、サイトに訪れた際のタイミング（またはリロードが走ったタイミング）で結構です。

> JavaScriptで制御するよりもサーバーサイドで出力内容を制御した方が良いと思います。

今後のために理由を具体的にご教示ください。
カートASP上にあるサイトなのでサーバーサイトは使えない環境です。

Answer 2

自己解決しました。ありがとうございました。

Comments

[kei344]

どのように解決したかコードを回答欄に追記いただけませんか？このページに辿り着いた同じ疑問を持つ人のために、ぜひお願いします。

【#質問をした後に自己解決してしまった | ヘルプ｜teratail（テラテイル）】
https://teratail.com/help#resolve-myself
> また後から読む人のためにも、具体的な解決手順を記載してください。