如何为Glider.js封装自动播放实例方法 | JavaScript

你可以通过扩展Glider的原型对象来添加自定义的autoplay方法，这样所有Glider实例都能直接调用这个方法，完美实现代码复用。下面是完整的实现方案：

步骤1：扩展Glider原型，封装自动播放逻辑 #

我们给Glider.prototype添加autoplay和配套的stopAutoplay方法，把自动播放、鼠标悬停暂停/恢复的逻辑全部封装进去，还支持自定义延迟时间：

// 扩展Glider原型，添加自动播放功能
Glider.prototype.autoplay = function(options = {}) {
  // 默认配置，允许传入自定义参数覆盖
  const config = {
    delay: 5000,
    ...options
  };

  // 存储定时器ID，方便后续清除
  this.autoplayTimer = null;
  const slider = this;
  const element = this.elements.container;

  // 定义滚动到下一项的核心函数
  const scrollNext = () => {
    slider.scrollItem('next');
  };

  // 启动自动播放的逻辑
  const startAutoplay = () => {
    if (!slider.autoplayTimer) {
      slider.autoplayTimer = setInterval(scrollNext, config.delay);
    }
  };

  // 停止自动播放的逻辑
  const stopAutoplay = () => {
    if (slider.autoplayTimer) {
      clearInterval(slider.autoplayTimer);
      slider.autoplayTimer = null;
    }
  };

  // 绑定鼠标悬停事件：暂停自动播放
  element.addEventListener('mouseover', stopAutoplay);
  // 绑定鼠标离开事件：恢复自动播放
  element.addEventListener('mouseout', startAutoplay);

  // 初始化时直接启动自动播放
  startAutoplay();

  // 给实例添加手动停止的方法，同时清理事件监听避免内存泄漏
  this.stopAutoplay = () => {
    stopAutoplay();
    element.removeEventListener('mouseover', stopAutoplay);
    element.removeEventListener('mouseout', startAutoplay);
  };
};

步骤2：在Glider实例中调用autoplay方法 #

实例化Glider之后，直接调用autoplay()方法即可启用自动播放，还可以传入自定义延迟参数：

window.addEventListener('load',function(){
  window._ = new Glider(document.querySelector('.glider'), {
    slidesToShow: 5,
    slidesToScroll: 1,
    itemWidth: 150,
    draggable: true,
    scrollLock: false,
    rewind: false,
    arrows: {
      prev: '.glider-prev',
      next: '.glider-next'
    }
  });

  // 启用自动播放，默认5000ms间隔，也可以自定义：_.autoplay({ delay: 3000 })
  window._.autoplay();
});

完整可运行代码示例 #

下面是整合后的完整HTML代码，包含样式、Glider依赖和我们的自定义功能：

* {
  box-sizing: border-box
}
html, body {
  width: 100%;
  overflow: hidden;
}
.glider{
  overflow: hidden;
}
.glider-contain {
  width: 90%;
  max-width: 997px;
  margin: 0 auto;
}
.glider-slide {
  min-height: 150px;
}
.glider-slide img {
  width: 100%;
}
<!doctype html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<style type="text/css">@-ms-viewport{width:auto!important;}</style>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/glider-js@1/glider.min.css" />
<script src="https://cdn.jsdelivr.net/npm/glider-js@1/glider.min.js"></script>
<script>
// 扩展Glider原型，添加自动播放功能
Glider.prototype.autoplay = function(options = {}) {
  const config = {
    delay: 5000,
    ...options
  };

  this.autoplayTimer = null;
  const slider = this;
  const element = this.elements.container;

  const scrollNext = () => {
    slider.scrollItem('next');
  };

  const startAutoplay = () => {
    if (!slider.autoplayTimer) {
      slider.autoplayTimer = setInterval(scrollNext, config.delay);
    }
  };

  const stopAutoplay = () => {
    if (slider.autoplayTimer) {
      clearInterval(slider.autoplayTimer);
      slider.autoplayTimer = null;
    }
  };

  element.addEventListener('mouseover', stopAutoplay);
  element.addEventListener('mouseout', startAutoplay);

  startAutoplay();

  this.stopAutoplay = () => {
    stopAutoplay();
    element.removeEventListener('mouseover', stopAutoplay);
    element.removeEventListener('mouseout', startAutoplay);
  };
};

window.addEventListener('load',function(){
  window._ = new Glider(document.querySelector('.glider'), {
    slidesToShow: 5,
    slidesToScroll: 1,
    itemWidth: 150,
    draggable: true,
    scrollLock: false,
    rewind: false,
    arrows: {
      prev: '.glider-prev',
      next: '.glider-next'
    }
  });

  // 启用自动播放
  window._.autoplay();
});
</script>
</head>
<body>
<div class="glider-contain">
  <div class="glider">
    <div><img alt="Test" src="http://placehold.it/300x300?text=1"></div>
    <div><img alt="Test" src="http://placehold.it/300x300?text=2"></div>
    <div><img alt="Test" src="http://placehold.it/300x300?text=3"></div>
    <div><img alt="Test" src="http://placehold.it/300x300?text=4"></div>
    <div><img alt="Test" src="http://placehold.it/300x300?text=5"></div>
    <div><img alt="Test" src="http://placehold.it/300x300?text=6"></div>
    <div><img alt="Test" src="http://placehold.it/300x300?text=7"></div>
    <div><img alt="Test" src="http://placehold.it/300x300?text=8"></div>
    <div><img alt="Test" src="http://placehold.it/300x300?text=9"></div>
    <div><img alt="Test" src="http://placehold.it/300x300?text=10"></div>
    <div><img alt="Test" src="http://placehold.it/300x300?text=11"></div>
    <div><img alt="Test" src="http://placehold.it/300x300?text=12"></div>
    <div><img alt="Test" src="http://placehold.it/300x300?text=13"></div>
    <div><img alt="Test" src="http://placehold.it/300x300?text=14"></div>
    <div><img alt="Test" src="http://placehold.it/300x300?text=15"></div>
    <div><img alt="Test" src="http://placehold.it/300x300?text=16"></div>
  </div>
  <button class="glider-prev">&laquo;</button>
  <button class="glider-next">&raquo;</button>
</div>
</body>
</html>

额外说明 #

• 原代码中addEventListener的第三个参数300是错误用法（该参数应为布尔值或配置对象），我们的实现里已经修正了这个问题。
• 如果需要手动停止自动播放，可以调用slider.stopAutoplay()，它会同时清除定时器和事件监听，避免内存泄漏。
• 支持灵活配置延迟时间，比如slider.autoplay({ delay: 3000 })就能设置3秒的自动播放间隔。

内容的提问来源于stack exchange，提问作者asimdev