JavaScript Folie Fehler

Question

Ich versuche, einen Schieberegler zu machen, der sich mit einem Klick ändert. Hier ist mein JS-Code.

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; 

und dies ist meine CSS-Codes für 3 Bilder

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

ändert sich nichts, wenn ich p1 Block und andere none.However machen, wenn ich P2 oder P3 Block und andere keine machen, Schieber geht an p1 und dann nicht wieder ändern. Was ist das Problem hier? Und das ist die html von div

<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

Sie müssen die Variable außerhalb der Funktion definieren und else if verwenden.

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; 
    } 
} 

Answer 2

ändert sich nichts, wenn ich p1 Block und andere none.However machen, wenn ich P2 oder P3 Block und andere keine machen, geht Regler nach p1 und tut dann wieder ändern.

Was sollte sich ändern? jedes Mal, wenn Sie Sie Methode anrufen, was wird zuerst passieren ???

function slidee(){ 
     var sl=0; 

     if(sl==0){ 
     img1.style.display= "none"; 
     img2.style.display= "block"; 
     sl=1; 
     } 
     ... 
    } 

Was ist das Problem hier?

Bei jedem Funktionsaufruf wird sl auf 0 gesetzt.

var sl=0