时间戳

首页 > 解决方案 > Javascript 幻灯片如何使其更干燥

javascript - Javascript 幻灯片如何使其更干燥

问题描述

我在 Javascript 中创建了一个简单的自动/手动幻灯片，但我需要帮助以使其更干燥。

这是我的 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>

我最初考虑将超时功能与单击事件结合起来，但是，我不知道如何检查类似这样的内容：“如果按钮已被单击，则更改图像”和“如果按钮尚未被单击，请等待 X秒并更改图像”以及“如果单击按钮等待 x 秒并且如果尚未单击按钮，则更改图像”。

我还想在每次图像更改时重置动画，但我不确定是否可以在 autoSlide() 函数中添加超时函数。

任何帮助都感激不尽！

谢谢你，波格丹

标签： javascripteventsslideshow

解决方案

推荐阅读