Question

我正在尝试实施＆＃34;分享＆＃34;按钮进入我现有的幻灯片放映，它在＆＃34; setInterval（）＆＃34;每5秒翻转一次图像的方法。共享按钮的要点是让用户喜欢某个＆＃34; slide＆＃34;，并且能够单击共享按钮以发送他们正在查看的特定幻灯片。我首先要担心的是，我认为无法判断点击分享按钮的哪个幻灯片（因为整体上使用了相同的按钮＆＃34; slideShow＆＃34;，很难判断单击按钮的位置）。我相信最好的方法是让我的幻灯片在阵列上工作（如果你不这么认为，请告诉我）。通过使它成为一个数组，我相信分享按钮更容易访问用户在幻灯片放映中的哪个索引，并发送他们正在查看的那个索引。但是，我对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);
}

每次单击共享按钮时，该幻灯片的索引都会添加到shares数组中。您可以稍后迭代共享数组。

要迭代此数组，请尝试类似

的内容

var len = shares.length;

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

将Javascript SlideShow从间隔转换为数组

1 个答案: