Materializecss v1.0.0轮播自动滚动/自动播放（无jquery）[关闭]

Question

关闭。这个问题需要details or clarity。它当前不接受答案。

---

是否要改善此问题？通过editing this post添加详细信息并澄清问题。

[2天前关闭。

如何在不使用JQuery的情况下在Materializecss v1.0.0中为转盘创建自动滚动功能？

当前实例化不支持自动滚动或自动播放功能。有一些用于调用next和prev的方法，因此必须有一种方法来设置自动滚动轮播。

Answer 1

我想发布一个我认为其他人会有用的解决方案。在这里，我在materializecss v1.0.0中为转盘创建了自动滚动功能，而无需使用jquery。

我个人认为这是应在Materializecss中默认设置的内容，但由于并非如此，所以我做到了这一点。

您也可以在https://codepen.io/tuffant21/pen/abOKPgO处查看

非常感谢+1：）

window.onload = function() {
  initCarousel('.carousel', {
    fullWidth: true,
    indicators: true,
    autoScroll: 6000 // time in ms
  });
}

function initCarousel(elms, opts) {
  if (!window || !document) return null;

  const instances = M.Carousel.init(getElements(elms), opts);

  if (Array.isArray(instances)) {
    for (let i = 0; i < instances.length; ++i) {
      addAutoScroll(instances[i]);
    }
  } else {
    addAutoScroll(instances);
  }

  return instances;
}

function destroyCarousel(instances) {
  if (!window || !document) return null;

  if (Array.isArray(instances)) {
    for (let i = 0; i < instances.length; ++i) {
      removeAutoScroll(instances[i]);
      instances[i].destroy();
    }
  } else {
    removeAutoScroll(instances);
    instances.destroy();
  }
}

function addAutoScroll(instance) {
  if (!instance.options.autoScroll) return;

  instance.autoScrollIntervalId = window.setInterval(() => {
    instance.next();
  }, instance.options.autoScroll);

  instance.el.addEventListener("mouseover", carouselMouseOverTouchStart, {
    passive: true
  });
  instance.el.addEventListener("mouseleave", carouselMouseOutTouchEnd, {
    passive: true
  });
  instance.el.addEventListener("touchstart", carouselMouseOverTouchStart, {
    passive: true
  });
  instance.el.addEventListener("touchend", carouselMouseOutTouchEnd, {
    passive: true
  });
}

function removeAutoScroll(instance) {
  if (instance.autoScrollIntervalId) {
    window.clearInterval(instance.autoScrollIntervalId);
    instance.autoScrollIntervalId = undefined;
  }

  instance.el.removeEventListener("mouseover", carouselMouseOverTouchStart);
  instance.el.removeEventListener("mouseleave", carouselMouseOutTouchEnd);
  instance.el.removeEventListener("touchstart", carouselMouseOverTouchStart);
  instance.el.removeEventListener("touchend", carouselMouseOutTouchEnd);
}

function carouselMouseOverTouchStart() {
  const instance = M.Carousel.getInstance(this);
  if (!instance) return;

  if (instance.autoScrollIntervalId) {
    window.clearInterval(instance.autoScrollIntervalId);
    instance.autoScrollIntervalId = undefined;
  }
}

function carouselMouseOutTouchEnd() {
  const instance = M.Carousel.getInstance(this);
  if (!instance) return;

  if (!instance.autoScrollIntervalId) {
    instance.autoScrollIntervalId = window.setInterval(() => {
      instance.next();
    }, instance.options.autoScroll);
  }
}

// if searching for an element by id, insert a # in front of the passed in id
function getElements(elms) {
  if (elms.charAt(0) === "#") {
    elms = elms.replace("#", "");
    return document.getElementById(elms);
  }

  return document.querySelectorAll(elms);
}

<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

<!-- Take note of the no-autoinit class -->
<!-- If you want M.AutoInit() to ignore a certain element, you can add the class .no-autoinit to the element and it will not be initialized by autoinit. -->
<div class="container">
  <div class="carousel carousel-slider no-autoinit">
    <a class="carousel-item"><img src="https://lorempixel.com/800/400/food/1"></a>
    <a class="carousel-item"><img src="https://lorempixel.com/800/400/food/2"></a>
    <a class="carousel-item"><img src="https://lorempixel.com/800/400/food/3"></a>
    <a class="carousel-item"><img src="https://lorempixel.com/800/400/food/4"></a>
  </div>
</div>