HTML:
<div id="father">
<div class="son" style="color: #8C85E6">1</div>
<div class="son">2</div>
<div class="son">3</div>
<div class="son">4</div>
<div class="son">5</div>
</div>
<button onclick="prev()">prev</button>
<button onclick="next()">next</button>
js代码:
function next() {
var father=document.getElementById("father")
var son=document.getElementsByClassName("son");
father.insertBefore(son[son.length-1],son[0]);
}
function prev() {
var father=document.getElementById("father")
var first=document.getElementsByClassName("son")[0];
father.appendChild(first)
}
实现的效果为:点击next,将第一个元素追加到末尾;点击prev,将最后一个追加到最前面;