用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分别赋给最后一个变量。这就是这个需求的大致分析过程，然后代码实现了一下。下面是代码实现。

代码实现：

效果展示：

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