Javascript-如何向此幻灯片添加动态按钮？

Question

So I'm making a slideshow with 4 divs that cycle around automatically. What I have works for this. The thing I'm having diffucluty create is a few buttons at the bottoms where if your click on button three for example, it jumps to div 3 and the automatic sliding jumps there. Here is my code so far...

<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);

}());

This works so far, but again I have no idea how to go about making the buttons function, wherein if you click on btn[i] it jump to slides[i]. I thought something along the lines of this would do the trick but it's not working.

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

Answer 1

you can do something like this hope this is what you want

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>