循环列表项：CSS还是JS？

Question

我有以下栏，它是<ul>，其中没有显示某些列表项。单击箭头时，我需要通过隐藏或显示最左侧/最右侧的元素来向左或向右移动元素。

我的HTML

<div id="linkbar">
    <a href="#linkbar" onclick="moveleft();"><img src="./img/arrowleft.png"></a>
    <div id="linkbarinternal">
        <ul id="linkbaritems">
            <li><a><img src="./img/banner01.jpg"></a></li>
            <li><a><img src="./img/banner02.jpg"></a></li>
            <li><a><img src="./img/banner03.jpg"></a></li>
            <li><a><img src="./img/banner04.jpg"></a></li>
            <li><a><img src="./img/banner05.jpg"></a></li>
            <li><a><img src="./img/banner06.jpg"></a></li>
            <li><a><img src="./img/banner07.jpg"></a></li>
            <li><a><img src="./img/banner08.jpg"></a></li>
        </ul>
    </div>
    <a href="#linkbar" onclick="moveright();"><img src="./img/arrowright.png"></a>
</div>

我尝试了什么

var linkbarcounter = 0;

function moveleft() {
    document.getElementById("linkbaritems").children[linkbarcounter++].style.display="none";
}

function moveright() {
    document.getElementById("linkbaritems").children[--linkbarcounter].style.display="inline";
}

Answer 1

var bar = document.getElementById("linkbar");
for(var i=0;i<bar.children.length; i++)
    // Do whatever per item.
    console.log(i ,bar.children[i]);