0

下記の 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>
1
  • 関連するコードを質問本文にも含めるようにしてください。
    – cubick
    Commented 1月8日 5:44

0

この質問に回答するには、ログインする必要があります。

のタグが付いた他の質問を参照する。