Question

我试图创建一个切换按钮，当激活时会触发一个功能。

此功能附加超时，并在给定时间后重新触发。

这应该仅在按钮处于活动状态时发生，因此如果用户再次单击该按钮，则应自动停止。换句话说，如果用户已将切换按钮设为“无效”，则该功能应为return

以下是代码：

＆＃13;

function autoSlides() {
  slideIndex++;
  showSlides(slideIndex);
  setTimeout(autoSlides, 10000);
}

function plusSlides(n) {
  showSlides(slideIndex += n);
}

function currentSlide(n) {
  n--;
  showSlides(slideIndex = n);
}

function showSlides(n) {
  var i;
  for (i = 0; i < slides.length; i++) {
    if (slides[i].style.transform == "translateX(100%)") {
      slides[i].style.display = "none";
    } else if (slides[i].style.transform == "translateX(-100%)") {
      slides[i].style.display = "inline-block";
    }
    slides[i].style.transform = "translateX(-100%)";
  }

  if (slideIndex >= slides.length) {
    slideIndex = 0;
  } else if (slideIndex < 0) {
    slideIndex = slides.length;
  }

  slides[slidePrev].style.transform = "translateX(100%)";
  slides[slideIndex].style.transform = "translateX(0)";

  slidePrev = slideIndex;
}

＆＃13;

.Slides {
  position: absolute;
  transform: translateX(-100%);
  transition: transform 2s;
  display: inline-block;
  width: 100%;
  height: 100%;
  margin: 0;
}

.Slides-Images {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#asktoggle-base {
  height: auto;
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  margin: 0 auto;
  text-align: center;
}

#asktoggle {
  font-size: 0.5em;
  cursor: pointer;
  color: white;
  background-color: rgba(226, 208, 0, 0.6);
  border-radius: 3px;
  padding: 10px;
  display: inline-block;
  transition: background-color 0.5s linear;
}

.active,
#asktoggle:hover {
  background-color: rgb(226, 208, 0);
}

＆＃13;

<span class="Slides" style="transform:translateX(0)">
  <img src="//placehold.it/1000?text=Gallery-1" class="Slides-Images">
</span>

<span class="Slides">
  <img src="//placehold.it/1000?text=Gallery-2" class="Slides-Images">
</span>

<span class="Slides">
  <img src="//placehold.it/1000?text=Gallery-3" class="Slides-Images">
</span>

<span class="Slides">
  <img src="//placehold.it/1000?text=Gallery-4" class="Slides-Images">
</span>

<div id="asktoggle-base">
  <span id="asktoggle">toggle slideshow</span>
</div>

＆＃13;

我尝试创建另一个function和一个do{} while()循环，其中所述函数会将.active类添加到该按钮，然后触发autoSlides()函数，该函数将是只要.active类是按钮的一部分，就会激活。遇到问题是我能说的最低限度，这个真的并没有用几种方式工作。

我看到了this的问题，答案是在jQuery中，我宁愿避免使用它，因为我的其他脚本都是很好的。 JavaScript的。但如果需要，我想我可以做点什么。

Answer 1

我认为这就是你要找的东西。我们根据“活动”类设置运行与否的功能。

信息：由于您未提供完整的代码，因此代码段无效。

function autoSlides() {
    var slidesTimeout = setTimeout(function () {
        autoSlides();
    }, 10000);

    if (document.getElementById("asktoggle").classList.contains('active')) {
        slideIndex++;
        showSlides(slideIndex);
        slidesTimeout;
    } else {
        clearTimeout(slidesTimeout);
    }
}

function plusSlides(n) {
    showSlides(slideIndex += n);
}

function currentSlide(n) {
    n--;
    showSlides(slideIndex = n);
}

function showSlides(n) {
    var i;
    for (i = 0; i < slides.length; i++) {
        if (slides[i].style.transform == "translateX(100%)") {
            slides[i].style.display = "none";
        } else if (slides[i].style.transform == "translateX(-100%)") {
            slides[i].style.display = "inline-block";
        }
        slides[i].style.transform = "translateX(-100%)";
    }

    if (slideIndex >= slides.length) {
        slideIndex = 0;
    } else if (slideIndex < 0) {
        slideIndex = slides.length;
    }

    slides[slidePrev].style.transform = "translateX(100%)";
    slides[slideIndex].style.transform = "translateX(0)";

    slidePrev = slideIndex;
}

document.getElementById("asktoggle").addEventListener("click", toggleActive);
function toggleActive() {
    document.getElementById("asktoggle").classList.toggle("active");
    autoSlides();
}

.Slides {
  position: absolute;
  transform: translateX(-100%);
  transition: transform 2s;
  display: inline-block;
  width: 100%;
  height: 100%;
  margin: 0;
}

.Slides-Images {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#asktoggle-base {
  height: auto;
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  margin: 0 auto;
  text-align: center;
}

#asktoggle {
  font-size: 0.5em;
  cursor: pointer;
  color: white;
  background-color: rgba(226, 208, 0, 0.6);
  border-radius: 3px;
  padding: 10px;
  display: inline-block;
  transition: background-color 0.5s linear;
}

.active,
#asktoggle:hover {
  background-color: rgb(226, 208, 0);
}

<span class="Slides" style="transform:translateX(0)">
  <img src="//placehold.it/1000?text=Gallery-1" class="Slides-Images">
</span>

<span class="Slides">
  <img src="//placehold.it/1000?text=Gallery-2" class="Slides-Images">
</span>

<span class="Slides">
  <img src="//placehold.it/1000?text=Gallery-3" class="Slides-Images">
</span>

<span class="Slides">
  <img src="//placehold.it/1000?text=Gallery-4" class="Slides-Images">
</span>

<div id="asktoggle-base">
  <span id="asktoggle">toggle slideshow</span>
</div>

Answer 2

将participants存储到变量var sto = setTimeout();

这是一个例子;

＆＃13;

clearTimeout(sto);

＆＃13;

var sto = 0;
var isEnabled = true;

function autoSlides()
{
    console.log("called");
}

function toggleMethod()
{
    if (isEnabled)
    {
        sto = setTimeout(autoSlides, 1000);
        console.log("enabled");
    } else {
        clearTimeout(sto);  
        console.log("disabled");        
    }

    isEnabled = !isEnabled; 
}

＆＃13;

切换按钮激活导致功能触发

2 个答案: