Javascript 如何使“下一步”和“上一步”按钮在列表中导航并触发其功能？

我有一个小问题，我想不出怎么办。 我有一张单子。单击每个列表项会更改div中的背景图像和文本。 但我也希望有一个下一个/上一个按钮，便于导航。这些“下一步”和“上一步”按钮将相应地更改背景和文本框。 你会怎么做

这将更改背景图像：

<script type="text/javascript">
var backImage = [ 
'img/img.jpg',
'img/img2.jpg',
'img/img3.jpg',

];

function changeBGImage(evt, id){
var el = evt.target || evt.srcElement;
var ul = el.parentNode;
var lis = ul.getElementsByTagName('li');

for (var i=0, iLen=lis.length; i<iLen; i++) {
  if (lis[i] == el) {
        document.body.background = backImage[i];
        }
    }
}

</script>

var backImage=[
“img/img.jpg”，
“img/img2.jpg”，
“img/img3.jpg”，
];
功能更改BGImage（evt，id）{
var el=evt.target | | evt.src元素；
var ul=el.parentNode；
var lis=ul.getElementsByTagName（'li'）；
对于（var i=0，iLen=lis.length；i通常，我会通过保持一个指向活动元素的“指针”来处理这种情况。例如，您可以将与活动列表项对应的DOM元素存储在javascript变量中。然后，当单击“后退”和“前进”时，您可以导航到列表项的相邻同级

或者，您可以简单地存储一个整数id。假设您的html如下所示：

<li id="listItem_0" myCustomAttr="0">Stuff 1</li>
<li id="listItem_1" myCustomAttr="1">Stuff 2</li>
.....

材料1
材料2
.....

然后，您可以存储自定义属性的值，然后将（n-1）或（n+1）连接到“listItem_”并执行document.getElementById（）以查找下一个元素，并执行与单击该元素相同的操作

总之，有很多方法可以做到这一点，但它们可能会以某种javascript变量直接或间接跟踪当前项为中心。
此外，请确保考虑边界条件，并在选择第一个元素时在视觉上禁用“上一步”按钮，在选择最后一个元素时禁用“下一步”按钮已选择此选项。
<ul onclick="CngMess(event, 'fred'); changeBGImage(event);">
    <li>listitem1</li>
    <li>listitem2</li><br>
    <li>listitem3</li><br>
</ul>

<li id="listItem_0" myCustomAttr="0">Stuff 1</li>
<li id="listItem_1" myCustomAttr="1">Stuff 2</li>
.....