Question

所以我正在制作一个带有4个div的幻灯片，这些div会自动循环。我的工作原理是什么。我有diffucluty创建的东西是底部的几个按钮，如果你点击按钮三，例如，它跳转到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>

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

2 个答案: