Question

我已经用Javascript创建了一个简单的自动/手动幻灯片放映，但是我需要帮助使其成为DRYer。

这是我的Javascript代码：

let image = document.getElementById('slideImg');
const button = document.querySelectorAll('.btn');
const imageArray = ['Images/baby.jpg', 'Images/botez-leagan.jpg', 'Images/tata.jpg'];

let i = 0;
let time = 5000;

loadEventHandlers();
window.onload= autoSlide;


function loadEventHandlers(){
  button[0].addEventListener('click', changeImg);
  button[1].addEventListener('click', changeImg);
}


function autoSlide(){

  image.classList.add('animate');

  image.src = imageArray[i];
  if(i < imageArray.length - 1){
    i++;
    }else{
    i = 0;
    }
  console.log(image);

  setTimeout("autoSlide()", time);


  }


  function changeImg(){
    image.src = imageArray[i];
    image.classList.add('animate');

  if(i < imageArray.length - 1){
    i++;
    }else {
    i=0;
    }

以及相关的HTML

   <div class="gallery">

  <div class="mySlides">
    <img src="" class="slide" id="slideImg">
  </div>



  <a class="prev btn" >&#10094;</a>
  <a class="next btn" >&#10095;</a>
</div>

最初，我想将超时功能与click事件结合在一起，但是，我不知道如何检查以下内容：“如果单击了按钮，则更改图像”和“如果未单击按钮” ，请等待X秒并更改图像”，以及“如果单击了按钮，请等待x秒，如果尚未单击按钮，请更改图像”。

我也想在每次图像更改时重置动画，但是我不确定是否可以在autoSlide（）函数中添加Timeout函数。

任何帮助将不胜感激！

谢谢你，博格丹

Javascript幻灯片如何使其变干

0 个答案: