最近在项目中遇到一个需求，就是实现一个功能，具体内容就是写一个类似轮播的功能，有限条标题，循环轮播。
首先准备一个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>