複数の画像があり、重複がない自動スライドショー

Question

コントロールを使わずに画像を自動的に変更する2つのスライドショーを作成する必要がありますが、同時に両方のスライドショーに同じ画像を表示しないでください。

私はこれをチェックするために、小さな機能を追加し、両方の画像が同じだった場合、私は残念ながら、私の機能はすべての時間を実行していないが、最初のイメージがあるだけで後1

で注文を横断2番目の画像の画像と一致しない場合は何もしません。

現在表示されている画像が一致しているときと、画像のいずれかが変更されたときに実行する必要があります。

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> 

希望これは、あなたができるいくつかの可能性があります...

Answer 2

に役立ちます。ここに私の考えがあります：

私は本質的に同じことをする2つの関数を作成したくないです。各.slideshow-containerをループし、表示されているn番目の子を見つけて非表示にし、次の子を表示する関数を作成することをお勧めします。各.slideshow-containerをループして次のimgを表示したら、img srcが同じかどうかを確認してください。その場合は、コンテナのいずれかの子をバンプしてください。

けど...

両方のスライドショーを同時に繰り返すので、私が使用するアプローチは、（はるかに少ないコードであるように）1つの画像だけであなたのdivのを作成し、それにIDを割り当てることです。私はバイオリンのために幅が変更された：

<div class="slideshow-container"> 
    <div class="mySlides fade"> 
    <img id="image1" class="slideshow-image" style="width: 300px;"> 
    </div> 
</div> 
<div class="slideshow-container" style="margin-top:0px;border:1px red solid"> 
    <div class="mySlides1 fade"> 
    <img id="image2" class="slideshow-image" style="width: 300px;"> 
    </div> 
</div> 

次に、アレイ内のすべてのimg源を入れて、画像の各開始インデックスを割り当てる（複数の写真を表示するために添加しました）。その（クラスslideshow-imageによって）各imgをループし、次のインデックスにそれを反復関数を作成し、そして

var slides = [ 
    'http://www.newsread.in/wp-content/uploads/2016/06/Images-13.jpg', 
    'http://free.clipartof.com/176-Free-Cartoon-Owl-Clipart.jpg', 
    'http://i.dailymail.co.uk/i/pix/2016/03/22/13/32738A6E00000578-3504412-image-a-6_1458654517341.jpg', 
    'http://cdn-2.butterflypictures.net/images/14-free-butterfly-clip-art-l.jpg', 
    'http://www.newsread.in/wp-content/uploads/2016/06/Images-3.jpg', 
    'http://images.clipartpanda.com/offense-clipart-jRiGGgAcL.gif' 
]; 

$('#image1').attr('src', slides[0]); 
$('#image1').data('index', 0); 
$('#image2').attr('src', slides[Math.floor(slides.length/2)]); 
$('#image2').data('index', Math.floor(slides.length/2)); 

：また、インデックスを格納data要素を取り付けます。 jQueryをインクルードしたので、この関数もjQueryを使用しています。

function showSlides() { 
    setInterval(function() { 
    $('.slideshow-image').each(function(iter) { 
     $this = $(this); 
     var newIndex = ($this.data('index') + 1) % slides.length; 
     // iterate the image 
     $this.attr('src', slides[newIndex]); 
     // set the new index 
     $this.data('index', newIndex); 
    }); 
    }, 2000); 
} 

これだけです。私はフェードアウトをやめましたが、好きなようにスタイルを設定することもできます。フィドルは異なる時間に読み込まれた画像を表示しますが、ソースがimgではかなり大きいためです。私はあなたにこれをするとは思わないでしょう。

ここでは、fiddleが更新されています。