JS Diashow-Funktion

Question

Für js Diashow Abschluss Ich habe versucht, es wie folgt funktioniert:

Wenn zuerst geladen: drei Bilder gesamt

<div class="images" style="display:block;"><img src="img_1.jpg"></div> 
<div class="images" style="display:none;"><img src="img_2.jpg"></div> 
<div class="images" style="display:none;"><img src="img_3.jpg"></div> 

<a class="prev" onclick="moveSlides(-1)">❮</a> 
<a class="next" onclick="moveSlides(1)">❯</a> 

Wenn Bilder zuerst geladen werden, wobei die erste Bild hat display:block, während andere zwei none standardmäßig hatten.

//when next/prev button is clicked 
function moveSlides(n) { 
    slideShow(n); 
};    

function slideShow(n) {         
    var slides = document.getElementsByClassName("images"); 

    // Display none for current image 
    for (var i = 0; i < slides.length; i++) { 
     slides[i].style.display = "none"; 
    } 

    // display block for next image 
    slides[n].style.display = "block"; 

}; 

Die Idee ist, dass, wenn die next oder prev Schaltfläche geklickt wird, wird es das nächste Bild display:block jedes Bild in display:none dann ändern drehen.

ich ein bisschen harte Zeit durchführende folgende Dinge habe:

1. Detecting, welches Bild gerade angezeigt wird, so dass, wenn entweder next oder prev Schaltfläche geklickt wird, er weiß, welches Bild angezeigt werden soll.
2. Wenn es durch das letzte Bild geht, sollte es zum ersten Bild zurückgehen.
3. Haben Sie noch andere Probleme?

Answer 1

Zuerst würde ich empfehlen, eine CSS-Klasse zu steuern, welche eine sichtbar ist:

.images   { display: none; } 
.images.visible { display: block; } 

diese Weise können Sie es als Selektor in der JS verwenden können, um herauszufinden, welche man vorher sichtbar war, bevor Sie wechseln zu dem neuen.

Sie können auch nextElementSibling und previousElementSibling verwenden, um das Element zu finden, das als nächstes sichtbar sein soll.

function slideShow(n) { 
    var slide = document.querySelector('.images.visible'); 
    slide.classList.remove('visible'); 
    if (n > 0) { 
     if (slide.nextSibling) { 
      slide.nextSibling.classList.add('visible'); 
     } else { 
      document.querySelector('.images').classList.add('visible'); 
     } 
    } else { 
     if (slide.previousSibling) { 
      slide.previousSibling.classList.add('visible'); 
     } else { 
      var slides = document.querySelectorAll('.images'); 
      slides[slides.length - 1].classList.add('visible'); 
     } 
    } 
} 

Dies vermeidet mit einer Schleife oder mehr Auswahl, als Sie brauchen, außer in dem Fall, dass es an den Anfang oder das Ende wickeln muss.