モダール画像を自動画像スライダーで動作させるにはどうすればいいですか？

Question

私のウェブサイトには画像が自動的に変わり、必要なものがあります： 画像をクリックすると、モーダル画像ギャラリーが表示されます。しかし、1つだけの写真は、すべての自動スライダーで動作します。私は最初のように他の写真をポップアップする方法を知らないし、モーダルが既にオンになっているときにスライダを作る方法がわからない、どうすればいいのだろうか...

これはjavascript 。

<script> 
var myIndex = 0; 
carousel(); 

function carousel() { 
    var i; 
    var x = document.getElementsByClassName("mySlides"); 
    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, 5000);  
} 
</script> 

<script> 

var modal = document.getElementById('myModal'); 

caption 
var img = document.getElementById('myImg'); 
var modalImg = document.getElementById("img01"); 
var captionText = document.getElementById("caption"); 
img.onclick = function(){ 
    modal.style.display = "block"; 
    modalImg.src = this.src; 
    captionText.innerHTML = this.alt; 
} 


var span = document.getElementsByClassName("close")[0]; 


span.onclick = function() { 
    modal.style.display = "none"; 
} 
</script> 

CODE：IDの代わりにID myImgあなたのイメージを与える、HTMLでのみページごとに一度使用されなければならない https://jsfiddle.net/y1Lw0k9d/3/

Answer 1

、クラスを使用してみてください。カルーセル機能でこれを正しく実行します。

クリックハンドラをアタッチする前に、単一の要素を返すgetElementByIdを使用します。クラス名を使用してイメージを取得し、配列をループしてハンドラをすべてのイメージに添付する必要があります。

モーダルで画像を変更するには、カルーセル機能でモーダル画像のSRCを変更するだけです。このように、モーダル画像は常に他のスライダと同じです。たぶんいくつかの効果のためにいくつかのCSSを追加または変更することがあります。

あなたのコードを見ると、あなた自身で書くことができ、それから学ぶことができるので、実際のコードは書いていません。