javascript - 包含多个图像且无重复的自动幻灯片放映

Question

我需要制作两个单独的幻灯片，无需任何控件即可自动更改图像，但两个幻灯片中不应同时出现相同的图像。

我添加了一个小函数来检查这一点，如果两个图像相同，我将我的订单遍历 1。

不幸的是，我的功能并没有一直运行，而是只有在选择了第一张图像之后，如果它与第二张图像中的图像不匹配，它才不会执行任何操作。

我需要我的函数在当前显示的图像相互匹配时运行，如果它确实改变了其中一个图像。这是我的简单代码:

jsfiddle

var slideIndex = 0;
showSlides();

function showSlides() {
    var i;
    var slides = document.getElementsByClassName("mySlides");

    for (i = 0; i < slides.length; i++) {
       slides[i].style.display = "none";
    }
    slideIndex++;
    if (slideIndex> slides.length) {slideIndex = 1}

    slides[slideIndex-1].style.display = "block";

    setTimeout(showSlides, 2000); // Change image every 2 seconds
}

var slideIndex1 = 0;
showSlides1();

function showSlides1() {
    var i;
    var slides = document.getElementsByClassName("mySlides1");

    for (i = 0; i < slides.length; i++) {
       slides[i].style.display = "none";
    }
    slideIndex1++;
    if ((slideIndex1> slides.length)&&$('.mySlides img').attr('src')==$('.mySlides1 img').attr('src')) {slideIndex1 = 1}

    slides[slideIndex1-1].style.display = "block";

    setTimeout(showSlides1,2000); // Change image every 2 seconds

}
if($('.mySlides img').attr('src')==$('.mySlides1 img').attr('src'))
        slideIndex1++;

Answer 1

与其使用两个函数，不如只使用一个来显示来自两个函数的图像。

    <script>
    var slideIndex = 0;
    var maximum = 2;
    var minimum = 0;
    var i;
    var slides = document.getElementsByClassName("mySlides");
    var slides1 = document.getElementsByClassName("mySlides1");; 

    $(".mySlides").css('display','none');
    $(".mySlides1").css('display','none');


    var randomnumber1;
    var randomnumber2;

    showSlides();

    function showSlides() {

        randomnumber1 = Math.floor(Math.random() * (maximum - minimum + 1)) + minimum;

       // run this loop until randomnumber1 is different than randomnumber2
        do {
            randomnumber2 = Math.floor(Math.random() * (maximum - minimum + 1)) + minimum;
        } while(randomnumber1 === randomnumber2);

       console.log(randomnumber1 + "," + randomnumber2);

        $(".mySlides").css('display','none');
        $(".mySlides1").css('display','none');

        slides[randomnumber1].style.display = "block";

        slides1[randomnumber2].style.display = "block";

        setTimeout(showSlides, 2000); // Change image every 2 seconds
    }
</script>

希望这有助于...