Javascript - このスライドショーに動的なボタンを追加するにはどうすればいいですか？

Question

私は周りを4周回するスライドショーを自動的に作ります。私はこれのために働いている。 私がdiffuclutyを作成していることは、ボタン3をクリックするとdiv 3にジャンプし、そこで自動スライドがジャンプするボトムのボタンです。ここに私のコードは、これまで...

<div id="slides"> 
    <div></div> <div></div> <div></div> <div></div> 
</div> 

<div id="btns"> 
    <a></a> <a></a> <a></a> <a></a> 
</div> 

Javascriptを：

(function slideshow(){ 

    var slides = document.getElementById('slides').children; 
    var btns = document.getElementById('btns').children; 
    var i = 0; 

    slides[i].style.opacity= '1'; 
    btns[i].style.opacity= '1'; 
    slides[i].style.zIndex= '999'; 

    function timer(){ 
      i = (i + 1);  
      var len = slides.length; 
      var previousSlides = slides[ (i+len-1) % len ]; 
      var previousBtns = btns[ (i+len-1) % len ]; 

      if (i % slides.length == 0) { 
      i = 0; 
      } 

      slides[i].style.opacity= '1'; 
      slides[i].style.zIndex= '999'; 
      previousSlides.style.opacity= '0'; 
      previousSlides.style.zIndex= '1'; 
      btns[i].style.opacity= '1'; 
      previousBtns.style.opacity= '0.5'; 
     }  
     setInterval(timer, 4000); 

}()); 

これは、これまでに動作しますが、再び私はあなたがクリックした場合、前記ボタンを機能させるについて行くにはどのよう見当がつかないbtn [i]それはスライド[i]にジャンプする。私はこれのラインに沿って何かがトリックを行うだろうと思ったが、それは動作していない。

btns[1].addEventListener('click', function(){ 
    i = 1; 
}); 

Answer 1

あなたは、これはあなたがまた

for(var i = 0; i < btns.length; i++){ 
    btns[i].addEventListener('click', function(){ 
    //do your stuff here 
    }); 
} 

Answer 2

<script> 
 
for(var i = 0; i < btns.length; i++){ 
 
    btns[i].addEventListener('click', function(){ 
 
    alert('test'); 
 
    }); 
 
} 
 
(function slideshow(){ 
 

 
    var slides = document.getElementById('slides').children; 
 
    var btns = document.getElementById('btns').children; 
 
    var i = 0; 
 

 
    slides[i].style.opacity= '1'; 
 
    btns[i].style.opacity= '1'; 
 
    slides[i].style.zIndex= '999'; 
 

 
    function timer(){ 
 
      i = (i + 1);  
 
      var len = slides.length; 
 
      var previousSlides = slides[ (i+len-1) % len ]; 
 
      var previousBtns = btns[ (i+len-1) % len ]; 
 

 
      if (i % slides.length == 0) { 
 
      i = 0; 
 
      } 
 

 
slides[i].style.opacity= '1'; 
 
      slides[i].style.zIndex= '999'; 
 
      btns[i].style.opacity= '1'; 
 
      previousSlides.style.opacity= '0'; 
 
      previousSlides.style.zIndex= '1'; 
 
      
 
      previousBtns.style.opacity= '0.5'; 
 
     }  
 
     setInterval(timer, 4000); 
 

 
}()); 
 

 
function testButton(value){ 
 

 
if(value == 1){ 
 
alert('Slide'+value); 
 
} 
 
} 
 

 
</script>

<div id="slides"> 
 
    <div>Slide 1</div> <div>Slide 2</div> <div>Slide 3</div> <div>Slide 4</div> 
 
</div> 
 
<div id="btns"> 
 
    <button type="button" onClick ="testButton(1);">Click Me1</button> 
 
<button type="button" onClick ="testButton(2);">Click Me2</button> 
 
<button type="button" onClick ="testButton(3);">Click Me3</button> 
 

 
<button type="button" onClick ="testButton(4);">Click Me4</button> 
 
</div>