Javascript 如何在按下向上和向下按钮滚动时，在div列表框中随时仅显示5项？
我有一个从数组填充的div列表框。目前，列表框显示所有10个项目，我可以按下按钮向下和向上滚动 我想知道如何限制列表框在任何时候只显示5个项目。例如，在开始时，它应该显示从test1到test5的项目，当我的选择器到达项目5（通过按下按钮）后，选择器应该停留在列表框的底部，并继续显示项目6，然后删除test1 如果你们能帮我完成这个任务，我将不胜感激。谢谢 （注意：如果我按向上按钮而不是向下按钮，它在任何时候都应该显示5个项目，但这次不是从列表框的开头删除项目，而是应该继续添加） 以下是现在显示数据的方式： 但当选择器达到test6时，我想显示如下数据：Javascript 如何在按下向上和向下按钮滚动时，在div列表框中随时仅显示5项？,javascript,jquery,listbox,Javascript,Jquery,Listbox,我有一个从数组填充的div列表框。目前，列表框显示所有10个项目，我可以按下按钮向下和向上滚动 我想知道如何限制列表框在任何时候只显示5个项目。例如，在开始时，它应该显示从test1到test5的项目，当我的选择器到达项目5（通过按下按钮）后，选择器应该停留在列表框的底部，并继续显示项目6，然后删除test1 如果你们能帮我完成这个任务，我将不胜感激。谢谢 （注意：如果我按向上按钮而不是向下按钮，它在任何时候都应该显示5个项目，但这次不是从列表框的开头删除项目，而是应该继续添加） 以下是现在显示
var nameList=[“test1”、“test2”、“test3”、“test4”、“test5”、“test6”、“test7”、“test8”、“test9”、“test10”]；
函数PopulateMyDivList（）
{
var listHTML=“”；
var i=0；
var container=document.getElementById（“MyDivList”）；
for（名称列表中的变量名称）
{
listHTML=名称列表[名称]；
container.innerHTML+=''+列表HTML+''；
i++；
}
item0.style.backgroundImage=“url（./selector.png）”；
}
var补偿=0；
职能Navi（a）
{
如果（a=“向上”）
{
document.getElementById（'item'+counterUp）.style.backgroundImage=“url（none）”；
补偿=补偿-1；
document.getElementById（'item'+counterUp）.style.backgroundImage=“url（./selector.png）”；
}
否则，如果（a==“向下”）
{
document.getElementById（'item'+counterUp）.style.backgroundImage=“url（none）”；
计数器++；
document.getElementById（'item'+counterUp）.style.backgroundImage=“url（./selector.png）”；
}
其他的
{
}
}
window.onload=函数（）{
PopulateMyDivList（）；
}
向上
向下
10
我用背景色替换了背景图像
var nameList=[“test1”、“test2”、“test3”、“test4”、“test5”、“test6”、“test7”、“test8”、“test9”、“test10”]；
var容器=$（“#MyDivList”）；
var maxItems=5；
var nameList_last=nameList.length-1；
var补偿=0；
职能Navi（a）{
如果（a=“向上”）{
如果（计数器==0）{
返回；
}
//减少补偿。
补偿--；
//如果计数器为零或更多，则在顶部添加新项目。
如果（（补偿）>=0）{
$（''+nameList[counterUp]+''）.insertBefore（$（“[id^='item']）.first（）；
}
//如果现在的项目超过最大值，请删除最后一个项目。
如果（$（“[id^='item']”）。长度>最大项）{
$（“[id^='item']”）.last（）.remove（）；
}
}否则{
if（countup==名称列表\u last）{
返回；
}
//删除列表顶部的项目。
$（“#项”+计数器）。删除（）；
//最后一项索引为：
var lastVisibleIndex=计数器+最大项；
//如果可以，将其添加到列表底部。
如果（lastVisibleIndex=maxItems-1）{
打破
}
}
$（“[id^='item']”）.first（）.css（{“背景色”：“#FF4”}）；
});
向上
向下
10
感谢您的精彩演示。可以在前5项之后开始删除项目吗？在您当前的演示中，黄色条不会向下移动，但我希望黄色条一直移动到第5项，之后它保持静态，作为您的演示，并开始从列表开始删除一项！（此外，当列表结束时，我希望列表框开始显示从乞讨开始，而不是停止）非常感谢，几乎是我想要的方式！到达列表末尾后，是否可以通过将Highlight移回指向test1的列表开头来重新创建列表？（此外，如果我位于列表开头，并且在显示最后5项的同时向上按如何将Highlight移到列表底部的test10？）我已经完成了。。。这是两个条件的简单相加。现在，如果你面临新的问题，你应该自己玩这个脚本，并创建一个新的问题。我在这里做的不仅仅是一个快速的帮助，我为你编写了所有代码。但我必须承认这很有趣。
<script>
var nameList = ["test1", "test2", "test3","test4","test5","test6","test7","test8","test9","test10"];
function PopulateMyDivList()
{
var listHTML = "";
var i=0;
var container = document.getElementById("MyDivList");
for (var name in nameList)
{
listHTML = nameList[name] ;
container.innerHTML += '<div id="item'+i+'">'+listHTML+'</div>';
i++;
}
item0.style.backgroundImage= "url(./selector.png)";
}
var counterUp=0;
function Navi(a)
{
if (a =="Up")
{
document.getElementById('item'+counterUp).style.backgroundImage= "url(none)";
counterUp=counterUp-1;
document.getElementById('item'+counterUp).style.backgroundImage= "url(./selector.png)";
}
else if (a =="Down")
{
document.getElementById('item'+counterUp).style.backgroundImage= "url(none)";
counterUp++;
document.getElementById('item'+counterUp).style.backgroundImage= "url(./selector.png)";
}
else
{
}
}
window.onload = function () {
PopulateMyDivList();
}
</script>
</head>
<body>
<br>
<button type=button onClick=Navi('Up');>Up </button><br>
<button type=button onClick=Navi('Down');>Down </button><br>
<div id="MyDivList" class="style_MyDivList">
<div id="Total">10</div>
</div>
</html>