Слайд-шоу Javascript Как сделать СУХОЙ - PullRequest
Новая
       7

Слайд-шоу Javascript Как сделать СУХОЙ

0 голосов
/ 12 февраля 2019

Я создал простое автоматическое / ручное слайд-шоу в 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секунд, и если кнопка НЕ ​​была нажата, измените изображение ".

Я также хотел бы сбрасывать анимацию каждый раз, когда изображение изменяется, но я не уверен, смогу ли я добавить функцию Timeout в функцию autoSlide ().

Любая помощь будет высоко ценится!

Спасибо, Богдан

...