用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，记录第1个位置元素的内容，然后定义一个变量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>

效果展示：

ok, 这样就能实现想要的功能了！