JavaScript-为什么我的第三张幻灯片没有显示？

Question

当我单击上一个和下一个符号时，仅1.jpg和2.jpg img起作用，而3.jpg则永远不会显示（我只能在1.jpg和2.jpg之间导航）。 控制台未显示任何错误。 我已经看了好几个小时了，我真的不认为我的代码有什么问题。
CSS：

img {width: 100%;}
#slideshow {position: relative;}
.prev, .next {cursor: pointer;position:absolute; top: 50%;}
.next {left: 99%;}

HTML：

<div id="slideshow">
    <a class="prev" onclick="slideshow(-1)">❮</a>
    <a class="next" onclick="slideshow(1)">❯</a>
    <img src="1.jpg">
    <img src="2.jpg">
    <img src="3.jpg">
</div>

JavaScript：

function slideshow(n) {
var imgEs = document.getElementById('slideshow').getElementsByTagName('img');
var i = 0, l = imgEs.length;
i += n;
if(i >= l) i = 0;
if(i < 0) i = l - 1;
switch(i) {
    case 0:
        imgEs[0].style.display = 'block';
        imgEs[1].style.display = 'none';
        imgEs[2].style.display = 'none';
        break
    case 1:
        imgEs[0].style.display = 'none';
        imgEs[1].style.display = 'block';
        imgEs[2].style.display = 'none';
        break
    case 2:
        imgEs[0].style.display = 'none';
        imgEs[1].style.display = 'none';
        imgEs[2].style.display = 'block';
        break
    default:
        imgEs[0].style.display = 'block';
        imgEs[1].style.display = 'none';
        imgEs[2].style.display = 'none';
    }
}
slideshow(0);

Answer 1

i是始终初始化为和的局部变量，永远不会初始化为2。U需要使用全局变量来保留当前活动图像索引的副本。

 var activeImgIndex = 0; function slideshow(n) { var imgEs = document.getElementById('slideshow').getElementsByTagName('img'); var l = imgEs.length; activeImgIndex += n; if(activeImgIndex >= l || activeImgIndex < 0) {activeImgIndex = 0;} switch(activeImgIndex) { case 0: imgEs[0].style.display = 'block'; imgEs[1].style.display = 'none'; imgEs[2].style.display = 'none'; break case 1: imgEs[0].style.display = 'none'; imgEs[1].style.display = 'block'; imgEs[2].style.display = 'none'; break case 2: imgEs[0].style.display = 'none'; imgEs[1].style.display = 'none'; imgEs[2].style.display = 'block'; break default: imgEs[0].style.display = 'block'; imgEs[1].style.display = 'none'; imgEs[2].style.display = 'none'; } } slideshow(0);