JS を使用して単純なニュースの上向きカルーセル効果を実現する

最近、デジタル大画面プロジェクトで機能を実現したいという要望に遭遇しましたが、具体的な内容としては、ニュースカルーセル、限定ニュースタイトル、サイクリックカルーセル、カルーセルの処理に対応した機能をそれぞれ記述するというものでした。タイトルに対応するジャンプ アドレスは変更できず、ニュースに属している必要があります。

まずdivを用意し、その中に表示する内容を設定します

div class="panel line1" style="overflow:hidden">
        <h2>新闻动态</h2>
        <div class="app">
          <a href="https://www.acwing.com/" target="_blank">acwing官网</a><br>
          <a href="https://www.baidu.com/" target="_blank">百度</a><br>
          <a href="https://www.csdn.net/" target="_blank">csdn官网</a><br>
          <a href="https://cn.vuejs.org/" target="_blank">vue3官网</a><br>
          <a href="http://element-plus.org/zh-CN/" target="_blank">elementplus官网</a><br>
        </div>
</div>

aタグのスタイルを指定するだけです

  a {
      text-decoration: none;
      color: #22cbda;
      display: inline-block;
      width: 100%;
      height: 40px;
      line-height: 40px;
      background-image: url('./images/jpg.jpg');
      margin-top: 10px;
}

一般的なアイデア：

最初にタイマーを定義し、次に回転するラベルを取得し、その値を取得して、各ノードを走査します。まず、i=0 の場合、中間変数 temp を定義し、最初の位置要素の内容を記録し、次に、変数 hrefTemp には、その href の値が格納されます。i<要素の長さ -1 の場合、次の要素の値が前の要素に代入され、href 属性は同じになります。次に、i = 要素の長さ - 1 の場合、temp と hrefTemp をそれぞれ最後の変数に代入します。これはこの要件の一般的な分析プロセスであり、その後コードが実装されます。以下はコードの実装です。

コード：

  <script>
    let aElement = document.querySelectorAll('.line1 a')
    setInterval(function () {
      for (let i = 0; i < aElement.length; i++) {
        if (i === 0) {
          temp = aElement[0].innerHTML
          tempSrc = aElement[0].getAttribute("href")
        }
        if (i < aElement.length - 1) {
          aElement[i].innerHTML = aElement[i + 1].innerHTML
          aElement[i].setAttribute("href", aElement[i + 1].getAttribute("href"))
        }
        if (i === aElement.length - 1) {
          aElement[aElement.length - 1].innerHTML = temp
          aElement[aElement.length - 1].setAttribute('href', tempSrc)
        }
      }
    }, 3500)
  </script>

結果を示す：

よし、これで目的の機能が実現できる！