javascript - 在幻灯片放映中使用 prev next 时重置计时器

Question

我有一个包含两张幻灯片的幻灯片。每张幻灯片在更改之前会保持 5-6 秒，但是当我使用 prev next 按钮时，效果不佳。它以某种方式保留了原始计时器(来自自动幻灯片)，因此当我选择“下一步”时，例如在转换前 1 秒，下一张幻灯片将只停留一秒钟。因此，当我选择下一步时，它不会重置计时器，而是保留原始计时器。

总而言之，我想在 prev next 函数中重置计时器(或者如果您有任何其他想法，我们将不胜感激)。

这是 JS:

"use strict";

var currentSlide = 1;
var transition = 1000;
var slideLength = 2;
var slideInter = 6000;

$(".slider ul li:nth-child(" + currentSlide + ")").fadeIn(transition);

$(".next").click(function () {
    nextSlide();
});

$(".prev").click(function () {
    prevSlide();
});

function nextSlide() {
    $(".slider ul li:nth-child(" + currentSlide + ")").fadeOut(transition);
    currentSlide++;
    if (currentSlide > slideLength) 
        currentSlide = 1;
    $(".slider ul li:nth-child(" + currentSlide + ")").fadeIn(transition);
}

function prevSlide() {
    $(".slider ul li:nth-child(" + currentSlide + ")").fadeOut(transition);
    currentSlide--;
    if (currentSlide < 1)
        currentSlide = 2;

    $(".slider ul li:nth-child(" + currentSlide + ")").fadeIn(transition);
}

   //UPDATED CODE   


var timer = setInterval(nextSlide, slideInter);

function resett() {
  clearInterval(timer);}

function timing () {
  timer = setInterval(nextSlide, slideInter);}

$(".slider").hover(resett,timing);

如果您需要任何其他信息，或者您对我所说的内容有任何不理解，请告诉我。

Answer 1

看起来您的计时器和 clearInterval 是在“悬停”下声明和管理的，并且不会在您触发 nextSlide 或 prevSlide 时调用。尝试将其声明为一个单独的全局函数，然后从 nextSlide 或 prevSlide 函数中调用它，以便在这些函数运行时相应地重置计时器。