自写滑块

Question

我有问题。我在香草js中创建了滑块，并混合了jquery一点，效果很好。我有两个箭头可以获取下一张或上一张幻灯片，并且由setInterval更新。可以猜测根本没有优化。 问题是：如何在没有setInterval的情况下单击之前更新控件。谢谢

function initSlider(elem,controlNext,controlPrev) {

  let courses = $(elem);
  let minSlides = 0;
  let maxSlides = 2;
  let next = document.querySelector(controlNext);
  let prev = document.querySelector(controlPrev);

  if($(window).width() < 1100) {
     minSlides = 1;
  }

  for(let course of courses) {
     fadeOut(course);
  }

  for(let i = minSlides; i < maxSlides; i++) {
     fadeIn(courses[i]);
  }


next.addEventListener("click", () => {
    if(maxSlides === courses.length || maxSlides === courses.length + 1) {
       next.style.opacity = "0.24";
       next.setAttribute("disable","true") 
    } else {
       maxSlides+=2;

       minSlides+=2;

       for(let course of courses) {
          fadeOut(course);
       }

       for(let i = minSlides; i < maxSlides; i++) {
          fadeIn(courses[i])
       }
    }
})


prev.addEventListener("click", () => {
    if(minSlides === 0 ) {
        prev.style.opacity = "0.24";
        prev.setAttribute("disable","true") 
    } else {
        maxSlides-=2;
        minSlides-=2;   

        for(let course of courses) {
            fadeOut(course);
        }

        for(let i = minSlides; i < maxSlides; i++) {
            fadeIn(courses[i]);
        }
    }
  })

setInterval(() => {
    if(minSlides === 0) {
        next.style.opacity = "1";
        next.removeAttribute("disable") 
        prev.style.opacity = "0.24";
        prev.setAttribute("disable","true") 
    } else if(maxSlides === courses.length || maxSlides === courses.length + 1) {
        next.style.opacity = "0.24";
        next.setAttribute("disable","true") 
        prev.style.opacity = "1";
        prev.removeAttribute("disable") 
    } else if(minSlides !== 0 && maxSlides !== courses){
        prev.style.opacity = "1";
        prev.removeAttribute("disable") 
        next.style.opacity = "1";
        next.removeAttribute("disable") 
    }
  }, 100);
}

p.s对不好的意思

Answer 1

假设您要根据幻灯片的显示更新按钮，则可以将代码以一定的间隔放在命名函数中，并在更改幻灯片后调用它。

注意，如果此处未显示其他代码来以其他间隔自动切换幻灯片，则还应该在其中添加函数调用：

function initSlider(elem,controlNext,controlPrev) {

  let courses = $(elem);
  let minSlides = 0;
  let maxSlides = 2;
  let next = document.querySelector(controlNext);
  let prev = document.querySelector(controlPrev);

  if($(window).width() < 1100) {
     minSlides = 1;
  }

  for(let course of courses) {
     fadeOut(course);
  }

  for(let i = minSlides; i < maxSlides; i++) {
     fadeIn(courses[i]);
  }

  function updateButtons() {
    if(minSlides === 0) {
        next.style.opacity = "1";
        next.removeAttribute("disable") 
        prev.style.opacity = "0.24";
        prev.setAttribute("disable","true") 
    } else if(maxSlides === courses.length || maxSlides === courses.length + 1) {
        next.style.opacity = "0.24";
        next.setAttribute("disable","true") 
        prev.style.opacity = "1";
        prev.removeAttribute("disable") 
    } else if(minSlides !== 0 && maxSlides !== courses){
        prev.style.opacity = "1";
        prev.removeAttribute("disable") 
        next.style.opacity = "1";
        next.removeAttribute("disable") 
    }
  }


  next.addEventListener("click", () => {
    if(maxSlides === courses.length || maxSlides === courses.length + 1) {
       next.style.opacity = "0.24";
       next.setAttribute("disable","true") 
    } else {
       maxSlides+=2;

       minSlides+=2;

       for(let course of courses) {
          fadeOut(course);
       }

       for(let i = minSlides; i < maxSlides; i++) {
          fadeIn(courses[i])
       }
    }
    updateButtons(); //call it at the end
  });


  prev.addEventListener("click", () => {
    if(minSlides === 0 ) {
        prev.style.opacity = "0.24";
        prev.setAttribute("disable","true") 
    } else {
        maxSlides-=2;
        minSlides-=2;   

        for(let course of courses) {
            fadeOut(course);
        }

        for(let i = minSlides; i < maxSlides; i++) {
            fadeIn(courses[i]);
        }
    }
    updateButtons(); //call it at the end
  });

}