设置轮播自动滚动

Question

如何将此轮播设置为自动模式？

这是一个很棒的轮播代码在codepen中的sn-p，但我需要将轮播设置为自动。

轮播 -> https://codepen.io/suez/pen/gadLre

$(document).ready(function() {

  var curPage = 1;
  var numOfPages = $(".skw-page").length;
  var animTime = 1000;
  var scrolling = false;
  var pgPrefix = ".skw-page-";

  function pagination() {
    scrolling = true;

    $(pgPrefix + curPage).removeClass("inactive").addClass("active");
    $(pgPrefix + (curPage - 1)).addClass("inactive");
    $(pgPrefix + (curPage + 1)).removeClass("active");

    setTimeout(function() {
      scrolling = false;
    }, animTime);
  };

  function navigateUp() {
    if (curPage === 1) return;
    curPage--;
    pagination();
  };

  function navigateDown() {
    if (curPage === numOfPages) return;
    curPage++;
    pagination();
  };

  $(document).on("mousewheel DOMMouseScroll", function(e) {
    if (scrolling) return;
    if (e.originalEvent.wheelDelta > 0 || e.originalEvent.detail < 0) {
      navigateUp();
    } else { 
      navigateDown();
    }
  });

  $(document).on("keydown", function(e) {
    if (scrolling) return;
    if (e.which === 38) {
      navigateUp();
    } else if (e.which === 40) {
      navigateDown();
    }
  });
  
  
function trigger(element,type){
    var event;
    if (document.createEvent) {
        event = document.createEvent("HTMLEvents");
        event.initEvent(type, true, true);
      } else {
        event = document.createEventObject();
        event.eventType = type;
      }
      event.eventName = type;
      if (document.createEvent) {
        element.dispatchEvent(event);
      } else {
        element.fireEvent("on" + event.eventType, event);
      }
}


});

这是 Javascript 中的动画脚本，带有 keydown 滚动。

Answer 1

您可以使用setInterval 方法，该方法将在指定的毫秒数过去后调用传递给它的函数。

var direction = 'forward';

setInterval(() => {
  if (curPage === numOfPages) direction = 'reverse';
  if (curPage === 1) direction = 'forward';
    
  return direction === 'forward' ? navigateDown() : navigateUp();
}, 3000); // 3000 is in milliseconds