具有多个图像且没有重复的自动滑块

Question

I need to make two separate slideshows which automatically changes images with no controls whatsoever, but there should not be the same images in both the slideshows at the same time. I added a small function to check for this, and if both images were the same, I traversed my order by 1. But, unfortunately my function is not running all the time, but only after the first image is selected and if it does not match the image in the second image, it does not do anything. I need my function to run whenever the images presently shown matches with each other, and if it does change one of the image. Here is my simple code:

[https://jsfiddle.net/dfv32vfq/]

Answer 1

use this code it must better.

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

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

    do
    {

        slideIndex++;
        if (slideIndex> slides.length) {slideIndex = 1}
    }
    while ($('.mySlides img').attr('src') == $('.mySlides1 img').attr('src'));

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

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