将 Javascript SlideShow 从间隔转换为数组

Question

我正在尝试在我现有的幻灯片放映中实现一个 "Share" 按钮，该按钮使用 "setInterval()" 方法运行，每 5 秒翻阅一次图像。共享按钮的作用是让用户喜欢某个 "slide"，并能够单击共享按钮发送他们正在查看的特定幻灯片。我首先担心的是，我认为无法判断共享按钮被点击的是哪张幻灯片（因为整个按钮都使用相同的按钮"slideShow"，很难判断按钮被点击的位置）。我相信最好的方法是让我的幻灯片在数组上工作（如果您不这么认为，请告诉我）。通过将其设为数组，我相信共享按钮可以更轻松地访问用户在幻灯片放映中所在的索引，并发送他们正在查看的特定索引。但是，一般来说，我对 Javascript 还是很陌生，不知道如何将此幻灯片转换为使用数组。我有以下操作间隔的代码：

var slides = document.querySelectorAll('#slides .slide');
var allSlides = document.getElementById('slides');
var currentSlide = 0;
var slideInterval = setInterval(nextSlide,6000);
var playing = true;

//Controls
var pauseButton = document.getElementById('pause');
var backButton = document.getElementById('back');
var forwardButton = document.getElementById('forward');
var shareButton = document.getElementById('share');

//Share Modal
var shareModal = document.getElementById('shareModal');
var closeShare = document.getElementById('closeShare');

function nextSlide(){
    if(playing){ 
    slides[currentSlide].className = 'slide';
    currentSlide = (currentSlide+1)%slides.length;
    slides[currentSlide].className = 'slide showing';
    clearInterval(slideInterval);
    slideInterval = setInterval(nextSlide,6000);
    } else{
    slides[currentSlide].className = 'slide';
    currentSlide = (currentSlide+1)%slides.length;
    slides[currentSlide].className = 'slide showing';
    pauseSlideshow();
    };  
}
function previousSlide(){
    if(playing){ 
    slides[currentSlide].className = 'slide';
    currentSlide = (currentSlide-1)%slides.length;
    slides[currentSlide].className = 'slide showing';
    clearInterval(slideInterval);
    slideInterval = setInterval(nextSlide,6000);
    } else{
    slides[currentSlide].className = 'slide';
    currentSlide = (currentSlide-1)%slides.length;
    slides[currentSlide].className = 'slide showing';
    pauseSlideshow();
};
}

此代码翻阅每张幻灯片，用户可以使用控件前进和后退。如果我想在其中实现一个数组，最好的方法是什么？（为了访问用户在哪张幻灯片上）在此先感谢您的帮助。

Answer 1

想到的一个策略：

var shares = [];

shareButton.addEventListener("click", function(){
    shares.push(currentSlide);
}

只要单击共享按钮，该幻灯片的索引就会添加到共享数组中。您可以稍后迭代共享数组。

要遍历此数组，请尝试

var len = shares.length;

for (i = 0; i < len; i++) {
    var photo = slides[i];
    // do something with the photo
}

将 Javascript SlideShow 从间隔转换为数组

Turn Javascript SlideShow from intervals to array

html

javascript

arrays

intervals

setinterval