こんにちは！
上毛印刷WEB制作担当のソーヤです。

私が以前勤めていた会社で、クライアントからあるオーダーがありました。
メインビジュアルに「朝日が昇るイメージ」と「ネオンが煌めくオフィス街のイメージ」の2種類があるんだけど、日中と夜中で表示切り替えて欲しい、というものです。

正直、このオーダーを受けた時の現場の反応は、「こんなのを実装して、いったい誰が喜ぶんだ・・・」でした。

リリースの直前だったと記憶しているので、
現場も倦厭していました。

今回は備忘録も兼ねて作り方をご紹介します。

JavaScript実装方法

$(function(){
function changeTime() {
  var date = new Date();
    var hour = date.getHours();
    if( 0 <= hour && hour <= 6 ){
      $('.is-daytime').remove();
    }else if(7 <= hour && hour <= 16 ){
      $('.is-midnight').remove();
    }else if(17 <= hour && hour <= 23){
      $('.is-daytime').remove();
    }
}
$(document).ready(changeTime);
});

時間帯による表示非表示の関数です。
これをページに埋め込むかJSファイルに記述してください。

カルーセル

今回は、当時カルーセル（スライダー）での実装だったので、こちらも再現します。
使うプラグインは「Slick」です。
「Slick」の公式サイトはこちら(外部リンク)

では、まず＜head＞タグ内に下記を記述してください。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>

次は下記を＜body＞タグ内に記述してください。

<div id="carousel">
    <div>
        <img class="is-daytime" src="https://jomo-p.co.jp/cp/wp/wp-content/uploads/2023/06/am.png" alt="">
        <img class="is-midnight" src="https://jomo-p.co.jp/cp/wp/wp-content/uploads/2023/06/pm.png" alt="">
    </div>
    <div>
        <img class="is-daytime" src="https://jomo-p.co.jp/cp/wp/wp-content/uploads/2023/06/am.png" alt="">
        <img class="is-midnight" src="https://jomo-p.co.jp/cp/wp/wp-content/uploads/2023/06/pm.png" alt="">
    </div>
    <div>
        <img class="is-daytime" src="https://jomo-p.co.jp/cp/wp/wp-content/uploads/2023/06/am.png" alt="">
        <img class="is-midnight" src="https://jomo-p.co.jp/cp/wp/wp-content/uploads/2023/06/pm.png" alt="">
    </div>
</div>

そうしたら下記をJSファイルに記述してください。

$('#carousel').slick();

実装例

うまくいっていれば0〜6時の間は「夜中」、7〜16時の間は「日中」、17〜23時の間は「夜中」の表示に切り替わるはずです。

まとめ

いかがでしょうか。
日常の業務でほとんど使うことはないと思いますが、
何かしらの参考になればと思います。