Question

我试图让它在完成后重新启动，或每隔6秒：

window.onload = function() {
document.getElementById('slide1').style.display = "none";
document.getElementById('slide1').style.display = "block";
    setTimeout(function(){
        document.getElementById('slide1').style.display = "none";
        document.getElementById('slide2').style.display = "block";
        setTimeout(function(){
            document.getElementById('slide2').style.display = "none";
            document.getElementById('slide3').style.display = "block";
        }, 1000);
    }, 1000);
}

我已经尝试过Stack Overflow中的其他问题，但是他们没有工作。

提前致谢。

Answer 1

应该这样做。

原始代码通过元素slide1到slide6，每秒它将隐藏最后一个并显示新的，ex：隐藏slide1-show slide2，隐藏slide2-show slide3等....

此代码用setInterval替换setTimeout，然后setInterval检查索引var以隐藏最新显示的一个并显示下一个，然后递增索引。

var index=1;
window.onload = function() {
document.getElementById('slide1').style.display = "block";
    setInterval(function(){
    if(index==6)
    index=1;
        document.getElementById('slide'+index).style.display = "none";
        document.getElementById('slide' + (index+1)).style.display = "block";
        index = index+1;
    }, 1000);
}

Answer 2

你是说这个？

// run every end of process:
var loader = function() {
    setTimeout(function(){
        document.getElementById('slide1').style.display = "none";
        document.getElementById('slide2').style.display = "block";

        setTimeout(function(){
            document.getElementById('slide2').style.display = "none";
            document.getElementById('slide3').style.display = "block";
            loader();
        }, 1000);
    }, 1000);
};

window.onload = function() {
    document.getElementById('slide1').style.display = "none";
    document.getElementById('slide2').style.display = "block";
    loader();
};

// Or you can run every 6 seconds
var loader = function() {
    setTimeout(function(){
        document.getElementById('slide1').style.display = "none";
        document.getElementById('slide2').style.display = "block";

        setTimeout(function(){
            document.getElementById('slide2').style.display = "none";
            document.getElementById('slide3').style.display = "block";
            loader();
        }, 1000);
    }, 1000);
};

window.onload = function() {
    document.getElementById('slide1').style.display = "none";
    document.getElementById('slide2').style.display = "block";

    //initial run
    loader();

    //run every 6 seconds
    setInterval(loader, 6000);
};

Answer 3

要回答关于＆＃34;如何重新启动的主要问题？＆＃34;，在此示例中，您可以使用modulus operator (%)。

此外，每次计时器触发时，不要使用querySelector，而是尝试将HTML元素保存在变量中。

下面是一个包含5个硬编码幻灯片或幻灯片元素的示例。

// initialize variables
var slideElements = [];
slideElements.push(document.getElementById("slide1"));
slideElements.push(document.getElementById("slide2"));
slideElements.push(document.getElementById("slide3"));
slideElements.push(document.getElementById("slide4"));
slideElements.push(document.getElementById("slide5"));
var currentSlideIndex = 0;
var numberOfSlides = slideElements.length;
var slideTimeMs = 1000;

// initialize slide elements
for(var i = 0; i < numberOfSlides; i++) {
    slideElements[i].style.display = 'none';
}
slideElements[0].style.display = 'block';

// start interval timer
setInterval(function() {
    slideElements[currentSlideIndex].style.display = 'none';
    currentSlideIndex = (currentSlideIndex + 1) % numberOfSlides;
    slideElements[currentSlideIndex].style.display = 'block';
}, slideTimeMs);

Answer 4

我想我理解你的问题。如果您想要通过幻灯片旋转并在结束时重新启动，请执行以下操作：

首先，创建一个我们可以传递＆＃34;幻灯片＆＃34;数组的函数。此函数将具有定义当前幻灯片索引的局部变量，以及最后一张幻灯片的索引（因此我们知道何时重新启动）。

我们创建了一个滑动函数，它可以处理获取元素，隐藏/显示下一个和前一个元素，以及递增（或重置）我们的索引。

＆＃13;

var rotateSlides = function (slides, delay) {
  // Start on the first slide in our list
  var currentIndex = 0;
  
  // Our final slide index
  var lastIndex = slides.length - 1;
  
  // Our main slide function
  var slideFn = function () {
    // The next slide, which we will be showing
    var next = slides[currentIndex];
    
    // declare previous, will be set later
    var previous; 
    
    if (currentIndex === 0) {
      // Set previous to the last slide in our list if we're current on index 0
      previous = slides[lastIndex];
    } else {
      // Otherwise, set previous to currentIndex - 1
      previous = slides[currentIndex - 1];
    }
    
    // Hide the previous slide
    previous.style.display = "none";
    
    // Show the next slide
    next.style.display = "block";
    
    if (currentIndex !== lastIndex) {
      // Increment currentIndex if we aren't on our last slide
      currentIndex += 1;
    } else {
      // Reset currentIndex if we ARE on our last slide
      currentIndex = 0
    }  
  };
   
  // call our function right away to start it
  slideFn();
  
  // set an interval to call our function at the given speed
  window.setInterval(slideFn, delay);
}

// Call our rotate function on a list of elemetns and
// pass a duration each slide should be visible for
rotateSlides([
  document.getElementById('slide1'),
  document.getElementById('slide2'),
  document.getElementById('slide3')
], 1000);

＆＃13;

<div id="slide1">Slide1</div>
<div id="slide2" style="display: none;">Slide2</div>
<div id="slide3" style="display: none;">Slide3</div>

＆＃13;

如果您想减慢速度，需要6秒钟，请将1000更改为2000，我们会调用rotateSlides。

参考： https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/setInterval

在Javascript中完成时重新启动功能

4 个答案: