javascript 上的多个自动幻灯片放映问题

Question

I'm an absolute newbie on Javascript, but I'm trying to put together three separate automatic slideshows on the same page. I've found a couple of helpful links from W3Schools ( https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_slideshow_auto & https://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_slideshow_rr ), but when using either, I can't include all three slideshows together, or if I repeat the same <script> three times (changing the document.getElementsByClassName ) all of the slideshows seem to collapse. I've also found some options for multiple slideshows, but I have no idea how to make them automatic. CSS is no problem, I just can't figure out the combination in the script to make all three slideshows work simultaneously and automatic.

Thanks in advance!

 <script> var slideIndex = 0; showSlides(); function showSlides() { var i; var slides = document.getElementsByClassName("slide1", "slide2", "slide3"); var dots = document.getElementsByClassName("dot"); for (i = 0; i < slides.length; i++) { slides[i].style.display = "none"; } slideIndex++; if (slideIndex > slides.length) {slideIndex = 1} for (i = 0; i < dots.length; i++) { dots[i].className = dots[i].className.replace(" active", ""); } slides[slideIndex-1].style.display = "block"; dots[slideIndex-1].className += " active"; setTimeout(showSlides, 2000); // Change image every 2 seconds } </script> <script> var myIndex = 0; carousel(); function carousel() { var i; var x = document.getElementsByClassName("slide1"); for (i = 0; i < x.length; i++) { x[i].style.display = "none"; } myIndex++; if (myIndex > x.length) {myIndex = 1} x[myIndex-1].style.display = "block"; setTimeout(carousel, 2000); // Change image every 2 seconds } </script>

 <div id="container1"> <img id="aa" class="slide1" src="id1.png"> <img id="bb" class="slide1" src="id2.png"> <img id="cc" class="slide1" src="id3.png"> </div> <div id="container2"> <img id="dd" class="slide2" src="cr1.png"> <img id="ee" class="slide2" src="cr2.png"> <img id="ff" class="slide2" src="cr3.png"> </div> <div id="container3"> <img id="ab" class="slide3" src="id1.png"> <img id="hh" class="slide3" src="id2.png"> <img id="ii" class="slide3" src="id3.png"> </div>

Answer 1

I had the same problem, I gave each slideshow a different class, then I included a separate function for each class and then I isolated each function by wrapping it in the below

;(function() {

JS code

})()

I've edited your code so it should work now :)

<div id="container1">
<img id="aa" class="slide1" src="id1.png">
<img id="bb" class="slide1" src="id2.png">
<img id="cc" class="slide1" src="id3.png">
</div>

<div id="container2">
<img id="dd" class="slide2" src="cr1.png">
<img id="ee" class="slide2" src="cr2.png">
<img id="ff" class="slide2" src="cr3.png">
</div>

<div id="container3">
<img id="ab" class="slide3" src="id1.png">
<img id="hh" class="slide3" src="id2.png">
<img id="ii" class="slide3" src="id3.png">
</div>


<script>
;(function() { 
var myIndex = 0;
carousel();

function carousel() {
    var i;
    var x = document.getElementsByClassName("slide1");
    for (i = 0; i < x.length; i++) {
       x[i].style.display = "none";  
    }
    myIndex++;
    if (myIndex > x.length) {myIndex = 1}    
    x[myIndex-1].style.display = "block";  
    setTimeout(carousel, 2000); // Change image every 2 seconds
}
})()

;(function() { 
var myIndex = 0;
carousel();

function carousel() {
    var i;
    var x = document.getElementsByClassName("slide2");
    for (i = 0; i < x.length; i++) {
       x[i].style.display = "none";  
    }
    myIndex++;
    if (myIndex > x.length) {myIndex = 1}    
    x[myIndex-1].style.display = "block";  
    setTimeout(carousel, 2000); // Change image every 2 seconds
}
})()

;(function() { 
var myIndex = 0;
carousel();

function carousel() {
    var i;
    var x = document.getElementsByClassName("slide3");
    for (i = 0; i < x.length; i++) {
       x[i].style.display = "none";  
    }
    myIndex++;
    if (myIndex > x.length) {myIndex = 1}    
    x[myIndex-1].style.display = "block";  
    setTimeout(carousel, 2000); // Change image every 2 seconds
}
})()
</script>