Проблема с несколькими автоматическими слайд-шоу на JavaScript - PullRequest
Новая
       67

Проблема с несколькими автоматическими слайд-шоу на JavaScript

0 голосов
/ 08 мая 2018

Я абсолютный новичок в Javascript, но я пытаюсь собрать три отдельных автоматических слайд-шоу на одной странице. Я нашел пару полезных ссылок из W3Schools (https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_slideshow_auto & https://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_slideshow_rr),, но при использовании любого из них я не могу включить все три слайд-шоу вместе, или если я повторяю одно и то же <script> три Временами (изменяя document.getElementsByClassName) все слайд-шоу, похоже, разрушаются. Я также нашел несколько вариантов для нескольких слайд-шоу, но я не знаю, как сделать их автоматически. CSS не проблема, я просто не могу понять, комбинация в сценарии для одновременной и автоматической работы всех трех слайд-шоу.

Заранее спасибо! 

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