下記の codepen をローカルに持ってきて動かしてみました。
codepen 9-4-1 ニュースティッカー
想定通りうまく動くのですが、ひとつだけ想定外の動きをします。
それは codepen の window はフォーカスを外れても(例えばメモ帳を起動したりしても)そのままクルクルとニュースが更新されていくのですが、ローカルで動かしている方は window のフォーカスを外れるとニュースの更新が停止してしまいます。
これをフォーカスが外れても常にニュースが更新されるようにする方法はないでしょうか?
ご教示いただける方、よろしくお願いいたします。
-ご指摘に対する対応-
質問本文にコードを含めるようご指摘を頂きましたので掲載いたします。
※ただ内容は codepen の html 部分と同一になります
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>9-4-1 ニュースティッカー:上下に遷移するお知らせ(bxSlider.js)</title>
<meta name="description" content="書籍「動くWebデザインアイディア帳」のサンプルサイトです">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<!--==============レイアウトを制御する独自のCSSを読み込み===============-->
<link rel="stylesheet" type="text/css" href="https://coco-factory.jp/ugokuweb/wp-content/themes/ugokuweb/data/reset.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.15/jquery.bxslider.min.css">
<link rel="stylesheet" type="text/css" href="https://coco-factory.jp/ugokuweb/wp-content/themes/ugokuweb/data/9-4-1/css/9-4-1.css">
</head>
<body>
<div class="wrapper">
<h1>上下に遷移するお知らせ(bxSlider.js)</h1>
<p>使用したライブラリ:<a href="https://bxslider.com/" target="_blank">https://bxslider.com/</a></p>
<ul class="slider">
<li><a href="#"><span>2021.11.01</span>1つめのニュースの記事です。</a></li>
<li><a href="#"><span>2021.11.02</span>2つめのニュースの記事です。</a></li>
<li><a href="#"><span>2021.11.03</span>3つめのニュースの記事です。</a></li>
</ul>
<!--/wrapper--></div>
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.15/jquery.bxslider.min.js"></script>
<script src="https://coco-factory.jp/ugokuweb/wp-content/themes/ugokuweb/data/9-4-1/js/9-4-1.js"></script>
</body>
</html>