亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

幻燈片故障排除(計時器和動畫)

幻燈片故障排除(計時器和動畫)

白衣非少年 2021-04-12 09:17:04
我試圖使用html,css和普通javascript完全從頭開始創建幻燈片,但是我不知道該怎么做,因此當我單擊其中一個幻燈片指示器時,setInterval()重置其計時器(以便能夠更改幻燈片而無需直接切換到下一張幻燈片,因為例如僅剩1秒鐘)我試圖用clearInterval()重置計時器,然后重新激活setInterval(),但是當我單擊幻燈片放映指示器之一時,幻燈片在隨機時刻開始改變(它們不遵循SetInterval()的6000ms計時器)因為某些原因)。var slides = document.querySelectorAll(".slide");var dots = document.querySelectorAll(".dot");function removeClass() {  for (var i = 0; i < slides.length; i++) {    slides[i].classList.remove('active');  }}function removeNext() {  for (var i = 0; i < slides.length; i++) {    slides[i].classList.remove('next');  }}function slideshow() {    currentSlide = document.querySelector(".active");    nextSlide = currentSlide.nextElementSibling;    if (nextSlide != null) {        removeClass();        nextSlide.classList.add('next');        nextSlide.classList.add('active');    } else {        removeClass();        slides[0].classList.add('next');        slides[0].classList.add('active');    }    removeNext();}var slideDelay = setInterval(slideshow, 6000);document.addEventListener("click", function(event){    if (event.target.className == "dot") {        removeClass();        var dotAttrValue = event.target.getAttribute('data-slide-to');        slides[dotAttrValue-1].classList.add('active');        clearInt
查看完整描述

1 回答

?
滄海一幻覺

TA貢獻1824條經驗 獲得超5個贊

具有兩個var聲明會創建兩個單獨的間隔。只需擺脫第二個,您就應該做好了。


var slides = document.querySelectorAll(".slide");

var dots = document.querySelectorAll(".dot");


function removeClass() {

    for (var i = 0; i < slides.length; i++) {

        slides[i].classList.remove('active');

    }

}


function removeNext() {

    for (var i = 0; i < slides.length; i++) {

        slides[i].classList.remove('next');

    }

}


function slideshow() {

    currentSlide = document.querySelector(".active");

    nextSlide = currentSlide.nextElementSibling;

    if (nextSlide != null) {

        removeClass();

        nextSlide.classList.add('next');

        nextSlide.classList.add('active');

    } else {

        removeClass();

        slides[0].classList.add('next');

        slides[0].classList.add('active');

    }

    removeNext();

}


var slideDelay = setInterval(slideshow, 6000);


document.addEventListener("click", function (event) {

    if (event.target.className == "dot") {

        removeClass();

        var dotAttrValue = event.target.getAttribute('data-slide-to');

        slides[dotAttrValue - 1].classList.add('active');

        clearInterval(slideDelay);

        slideDelay = setInterval(slideshow, 6000);//Var removed from here.

    }

});


查看完整回答
反對 回復 2021-04-29
  • 1 回答
  • 0 關注
  • 237 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號