Question

美好的一天，

我目前在javascript上遇到了一个问题。

我有一个基于此http://jsfiddle.net/pdb4kb1a/2的自动幻灯片循环。

现在我还在图像中添加了箭头，因此用户也可以自己来回走动。这里的问题是，当我调用onClick（）时，它继续重新调用slideShow（n）方法而不会中断＆＃39;也没有重置＆＃39;另一个。所以我最终得到的是一个循环的召回，而另一个仍在运行，这在单击箭头按钮后创建了一个非常快速和迷失方向的循环。

如何在通话时重置我的slideShow（）循环？

var imgArray = ['img/sleutels.jpg', 'img/naamborden.jpg', 'img/leer.jpg'];
var photoIndex = 2;                                                             
var photoId = document.getElementById('photoSlide');



function setIndex(n) {                          
    slideShow((photoIndex + n));                            
}


function slideShow(n) {
    photoId.className += "fadeOut";                                             
    setTimeout(appear, 500);                                                    
    photoIndex++;
    if (photoIndex == imgArray.length) {                                        
        photoIndex = 0; 
    }
    console.log(photoIndex);
   setTimeout(slideShow, 5000);                                                 
}


function appear() { 
    photoId.src = imgArray[photoIndex];     
    photoId.className = "";                     
}


slideShow();

亲切的问候

Answer 1

您是否尝试将幻灯片显示超时保存在变量中并在onclick中重置？这样的事情：

var imgArray = [
    'http://placehold.it/300x200',
    'http://placehold.it/200x100',
    'http://placehold.it/400x300'],
    curIndex = 0;
    imgDuration = 3000;

var slideTimeout;

document.getElementById('nextButton').addEventListener('click', onNextClick);

function slideShow() {
    document.getElementById('slider').className += "fadeOut";
    setTimeout(function() {
        document.getElementById('slider').src = imgArray[curIndex];
        document.getElementById('slider').className = "";
    },1000);
    nextIndex();
    slideTimeout = setTimeout(slideShow, imgDuration);
}
slideShow();

function onNextClick(domEvent){
  if (slideTimeout)
    clearTimeout(slideTimeout);
  
  nextIndex();
  slideShow();
}

function nextIndex(){
  curIndex++;
    if (curIndex == imgArray.length) { curIndex = 0; }
}

#nextButton{
  background-color: #aaa;
  padding:4px 12px;
  margin-bottom: 20px;
}

#slider {
    opacity:1;
    transition: opacity 1s; 
    display: block;
}

#slider.fadeOut {
    opacity:0;
}

<span id="nextButton">NEXT</span>
<img id="slider" src="http://placehold.it/50x200">

仍然有一些代码需要改变，因为我不太喜欢你处理索引的方式，但是它有效...你只需要增强这个代码来处理“上一个”图像，你就会拥有你想要的东西;希望它有所帮助

Answer 2

为了更好的结构，我会嵌套超时，然后存储超时的ID并清除它：

var appearId, showId;

function setIndex(n) {
    slideShow((photoIndex + n));
}

function slideShow(n) {
    photoId.className += "fadeOut";
    photoIndex++;

    if (photoIndex == imgArray.length) {
        photoIndex = 0;
    }
    console.log(photoIndex);

    if (appearId) { clearTimeout(appearId) }
    appearId = setTimeout(appear, 500);
}

function appear() {
    photoId.src = imgArray[photoIndex];
    photoId.className = "";

    if (showId) { clearTimeout(showId) }
    showId = setTimeout(slideShow, 4500);
}

slideShow();

我如何重置＆＃39;一种随叫随到的方法？

2 个答案: