Question

我是Javascript的绝对新手，但我正在尝试将三个单独的自动幻灯片放在同一页面上。我从W3Schools（https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_slideshow_auto＆amp; https://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_slideshow_rr）找到了一些有用的链接，但是当使用其中任何一个时，我不能将所有三个幻灯片放在一起，或者如果我重复相同的{{1三次（更改<script>）所有幻灯片似乎都崩溃了。我也找到了多个幻灯片的一些选项，但我不知道如何让它们自动化。 CSS没问题，我只是无法弄清楚脚本中的组合，以使所有三个幻灯片同时自动工作。

提前致谢！

document.getElementsByClassName

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

Answer 1

我遇到了同样的问题，我给每个幻灯片放映了一个不同的类，然后为每个类都包含了一个单独的函数，然后通过将其包装在下面来隔离每个函数

;（function（）{

JS代码

}）（）

我已经编辑了您的代码，因此现在可以使用了：）

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

在javascript上出现多个自动幻灯片问题

1 个答案: