JavaScriptの.setInterval()でニュースティッカー

// カウンターの初期値を0に設定
let counter = 0;

// 1秒ごとにカウンターをインクリメントする関数
function incrementCounter() {
  counter++;
  console.log(counter);
}

// 1秒ごとにincrementCounter()関数を実行する
const intervalID = setInterval(incrementCounter, 1000);

// 5秒後にsetIntervalを停止する
setTimeout(function() {
  clearInterval(intervalID);
}, 5000);

<div id="news-ticker-container">
  <div id="news-ticker">
    <!-- ここにニュースが表示されます -->
  </div>
  <div id="controls">
    <button id="prev">←</button>
    <button id="next">→</button>
  </div>
</div>

var newsList = [
    'ニュース1: 最新の情報です',
    'ニュース2: 重要な発表です',
    'ニュース3: 新商品のリリース情報です',
    'ニュース4: 4つ目のニュースです',
];

var newsTicker = document.getElementById('news-ticker');
var newsIndex = 0;

function updateNewsTicker() {
    // インデックスに対応するニュースを表示
    newsTicker.textContent = newsList[newsIndex];

    // 下から上にスライドするアニメーションを適用
    newsTicker.style.animation = 'slide-up 0.5s ease-in-out';
}

// 初回表示のために最初のニュースを表示
updateNewsTicker();

// 5秒ごとにニュースを更新
var intervalId = setInterval(function() {
    // アニメーションをリセット
    newsTicker.style.animation = '';

    // インデックスを更新 (もし最後のニュースだった場合は最初に戻る)
    newsIndex = (newsIndex + 1) % newsList.length;

    // 少し待ってからニュースを更新（アニメーションのリセットが完了するのを待つため）
    setTimeout(updateNewsTicker, 100);
}, 5000);

// 進むボタンがクリックされたときの処理
document.getElementById('next').addEventListener('click', function() {
    // アニメーションをリセット
    newsTicker.style.animation = '';

    // インデックスを更新 (もし最後のニュースだった場合は最初に戻る)
    newsIndex = (newsIndex + 1) % newsList.length;

    // 少し待ってからニュースを更新（アニメーションのリセットが完了するのを待つため）
    setTimeout(updateNewsTicker, 100);

    // インターバルをリセット
    clearInterval(intervalId);
    intervalId = setInterval(function() {
        newsTicker.style.animation = '';
        newsIndex = (newsIndex + 1) % newsList.length;
        setTimeout(updateNewsTicker, 100);
    }, 5000);
});

// 戻るボタンがクリックされたときの処理
document.getElementById('prev').addEventListener('click', function() {
    // アニメーションをリセット
    newsTicker.style.animation = '';

    // インデックスを更新 (もし最初のニュースだった場合は最後に戻る)
    newsIndex = (newsIndex - 1 + newsList.length) % newsList.length;

    // 少し待ってからニュースを更新（アニメーションのリセットが完了するのを待つため）
    setTimeout(updateNewsTicker, 100);

    // インターバルをリセット
    clearInterval(intervalId);
    intervalId = setInterval(function() {
        newsTicker.style.animation = '';
        newsIndex = (newsIndex + 1) % newsList.length;
        setTimeout(updateNewsTicker, 100);
    }, 5000);
});

#news-ticker-container {
    position: relative;  /* コンテナの位置を設定 */
    overflow: hidden;  /* コンテンツがコンテナを超える場合に非表示にする */
    height: 40px;  /* コンテナの高さを設定 */
    display: flex;  /* フレックスボックスモデルを適用 */
    justify-content: space-between;  /* 主軸方向に空間を挿入して要素間隔を最大にする */
    align-items: center;  /* 交差軸方向に要素を中央揃えにする */
}

#news-ticker {
    position: absolute;  /* ティッカーの位置を設定 */
    transition: transform 0.8s ease-in-out;  /* transformプロパティの変化を0.8秒間で緩やかに適用する */
}

#controls {
    position: absolute;  /* コントロールの位置を設定 */
    right: 0;  /* コントロールを右側に配置 */
    display: flex;  /* フレックスボックスモデルを適用 */
    align-items: center;  /* 交差軸方向に要素を中央揃えにする */
    justify-content: flex-end;  /* 主軸の終端に要素を配置 */
    gap: 10px;  /* 各要素間のギャップを設定 */
}

#controls button {
    height: 30px;  /* ボタンの高さを設定 */
    line-height: 30px;  /* ボタン内のテキストの行高を設定 */
    display: flex;  /* フレックスボックスモデルを適用 */
    align-items: center;  /* 交差軸方向に要素を中央揃えにする */
}

@keyframes slide-up {
    from {
        transform: translateY(100%);  /* アニメーション開始時、要素を下（Y軸方向）に100%移動 */
    }
    to {
        transform: translateY(0);  /* アニメーション終了時、要素の位置を初期状態（Y軸方向0%）に戻す */
    }
}