Use JS para lograr un efecto de carrusel ascendente de noticias simple

Recientemente, encontré un requisito en el proyecto de pantalla grande digital, que es realizar una función. El contenido específico es escribir una función similar al carrusel de noticias, títulos de noticias limitados, carrusel cíclico y correspondiente al proceso de carrusel, cada La dirección de salto correspondiente al título no se puede cambiar y debe pertenecer a la noticia.

Primero prepare un div, configure el contenido que se mostrará dentro

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>

Simplemente especifique el estilo de la etiqueta

  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;
}

Idea general:

Primero defina un temporizador, luego haga que la etiqueta se gire, obtenga el valor en ella y recorra cada nodo.Primero, cuando i = 0, defina una variable intermedia temp, registre el contenido del primer elemento de posición y luego defina un variable hrefTemp, almacena el valor de su href. Cuando i<longitud del elemento -1, el valor del siguiente elemento se asigna al anterior y el atributo href es el mismo. Luego, cuando i = longitud del elemento - 1, asigne temp y hrefTemp a la última variable respectivamente. Este es el proceso de análisis general de este requisito, y luego se implementa el código. A continuación se muestra la implementación del código.

Código:

  <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>

Mostrar resultados:

ok, entonces puedes lograr la función deseada!