JavaScript 幻灯片错误

Question

我正在尝试制作一个随按钮单击而变化的 slider 。这是我的 JS 代码。

    var img1=document.getElementById("p1");
    var img2=document.getElementById("p2");
    var img3=document.getElementById("p3"); 

    function slidee(){
    var sl=0;
        if(sl==0){
            img1.style.display= "none";
            img2.style.display= "block";
            sl=1;
        }
        if(sl==1){
            img2.style.display= "none";
            img3.style.display= "block";
            sl=2;
        }
        if(sl==2){
            img3.style.display= "none";
            img1.style.display= "block";
            sl=0;
        }
    }

var btnn=document.getElementById("btn");
btnn.onclick=slidee;

这是我的 3 张图片的 CSS 代码

#p1{
    display:block;
}
#p2{
    display:none;
}
#p3{
    display:none

当我让 p1 block 而其他 block 没有时，没有任何变化。但是，当我让 p2 或 p3 block 而其他 block 没有时， slider 转到 p1 然后不再改变。这里有什么问题？这是div的html

<div id="second">
<img class="mySlides" id="p1" src="rbt.jpg">
<img class="mySlides" id="p2" src="scv.jpg">
<img class="mySlides" id="p3" src="hml.jpg">
<button id="btn">Next</button>
</div>

Answer 1

您需要在函数外定义变量并使用else if。

var sl=0;
function slidee(){
    if(sl==0){
        img1.style.display= "none";
        img2.style.display= "block";
        sl=1;
    } else if(sl==1){
        img2.style.display= "none";
        img3.style.display= "block";
        sl=2;
    } else if(sl==2){
        img3.style.display= "none";
        img1.style.display= "block";
        sl=0;
    }
}