bigRust: Frage zum Wiki-Artikel „JavaScript“

Beitrag lesen

Ich habe einen Blog erstellt, bei dem rechts neben dem Beitragstext in einem Image-Slider verschiedene Bilder passend zum Beitrag durchlaufen sollen. Hierfür verwende ich folgendes Script:

var current = 0,
    slides = document.getElementsByClassName("slide");

setInterval(function() {
  for (var i = 0; i < slides.length; i++) {
    slides[i].style.opacity = 0;
  }
  current = (current != slides.length - 1) ? current + 1 : 0;
  slides[current].style.opacity = 1;
}, 3000);

Die HTML-Struktur sieht (vereinfacht) wie folgt aus:

<div class="blogbeitrag">			

     <p>Text</p>

     <div class="slider">
					<img class="slide" src="images/Bild1.jpg" alt="">
					<img class="slide" src="images/Bild2.jpg" alt="">
					<img class="slide" src="images/Bild3.jpg" alt="">
					<img class="slide" src="images/Bild4.jpg" alt="">
			</div>
</div>



<div class="blogbeitrag">			

     <p>Text</p>

     <div class="slider">
					<img class="slide" src="images/Bild5.jpg" alt="">
					<img class="slide" src="images/Bild6.jpg" alt="">
					<img class="slide" src="images/Bild7.jpg" alt="">
					<img class="slide" src="images/Bild8.jpg" alt="">
			</div>
</div>

Nun ist es so, dass der Slider sich auf alle Slider-Elemente in dem Blog bezieht. D.h. sobald Bild4 im ersten Beitrag fertig ist, "sliden" die Elemente unten weiter – oben wird es dafür schwarz.

Weiß jemand, was ich an dem Script ändern muss, damit das nicht passiert?

Danke für die Hilfe!

  • bigRust