一看就会，一学就废，，不知道自己哪里有问题，老师请检查

首页课程实战体系课手记专栏慕课教程

来源：4-4 自由编程

ocean学前端

2022-12-26 14:56:23

<!DOCTYPE html>

<head>

<title>Module 的基本用法</title>

</head>

<body>

<a href="javascript:;"

><img src="./imgs/1.jpg" alt="1" class="slider-img"

/></a>

</div>

<a href="javascript:;"

><img src="./imgs/2.jpg" alt="1" class="slider-img"

/></a>

</div>

<a href="javascript:;"

><img src="./imgs/3.jpg" alt="1" class="slider-img"

/></a>

</div>

<a href="javascript:;"

><img src="./imgs/4.jpg" alt="1" class="slider-img"

/></a>

</div>

</body>

</html>

相关代码：index.js

new Slider(document.querySelector(".slider"));

import Slider from "./Slider.js";

相关代码：base.js
// base
export const ELEMENT_NODE = 1;
export const SLIDER_ANIMATION_CLASSNAME = "slider-animation";
相关代码：constants.js
// 默认参数
export const DEFAULTS = {
  // 初始索引
  initialIndex: 0,
  // 切换时是否有动画
  animation: true,
  // 切换速度，单位 ms
  speed: 300,
};

export const LEFT_KEYCODE = 37;
export const RIGHT_KEYCODE = 39;
相关代码：baseSlider.js
// 父类
class BaseSlider {
  constructor(el, options) {
    if (el.nodeType !== ELEMENT_NODE)
      throw new Error("实例化的时候，请传入 DOM 元素！");

    // 实际参数
    this.options = {
      ...DEFAULTS,
      ...options,
    };

    const slider = el;
    const sliderContent = slider.querySelector(".slider-content");
    const sliderItems = sliderContent.querySelectorAll(".slider-item");

    // 添加到 this 上，为了在方法中使用
    this.slider = slider;
    this.sliderContent = sliderContent;
    this.sliderItems = sliderItems;

    this.minIndex = 0;
    this.maxIndex = sliderItems.length - 1;
    this.currIndex = this.getCorrectedIndex(this.options.initialIndex);

    // 每个 slider-item 的宽度（每次移动的距离）
    this.itemWidth = sliderItems[0].offsetWidth;

    this.init();
  }

  // 获取修正后的索引值
  // 随心所欲，不逾矩
  getCorrectedIndex(index) {
    if (index < this.minIndex) return this.maxIndex;
    if (index > this.maxIndex) return this.minIndex;
    return index;
  }

  // 初始化
  init() {
    // 为每个 slider-item 设置宽度
    this.setItemsWidth();

    // 为 slider-content 设置宽度
    this.setContentWidth();

    // 切换到初始索引 initialIndex
    this.move(this.getDistance());

    // 开启动画
    if (this.options.animation) {
      this.openAnimation();
    }
  }

  // 为每个 slider-item 设置宽度
  setItemsWidth() {
    for (const item of this.sliderItems) {
      item.style.width = `${this.itemWidth}px`;
    }
  }

  // 为 slider-content 设置宽度
  setContentWidth() {
    this.sliderContent.style.width = `${
      this.itemWidth * this.sliderItems.length
    }px`;
  }

  // 不带动画的移动
  move(distance) {
    this.sliderContent.style.transform = `translate3d(${distance}px, 0px, 0px)`;
  }

  // 带动画的移动
  moveWithAnimation(distance) {
    this.setAnimationSpeed(this.options.speed);
    this.move(distance);
  }

  // 设置切换动画速度
  setAnimationSpeed(speed) {
    this.sliderContent.style.transitionDuration = `${speed}ms`;
  }

  // 获取要移动的距离
  getDistance(index = this.currIndex) {
    return -this.itemWidth * index;
  }

  // 开启动画
  openAnimation() {
    this.sliderContent.classList.add(SLIDER_ANIMATION_CLASSNAME);
  }

  // 关闭动画
  closeAnimation() {
    this.setAnimationSpeed(0);
  }

  // 切换到 index 索引对应的幻灯片
  to(index) {
    index = this.getCorrectedIndex(index);
    if (this.currIndex === index) return;

    this.currIndex = index;
    const distance = this.getDistance();

    if (this.options.animation) {
      return this.moveWithAnimation(distance);
    } else {
      return this.move(distance);
    }
  }

  // 切换上一张
  prev() {
    this.to(this.currIndex - 1);
  }

  // 切换下一张
  next() {
    this.to(this.currIndex + 1);
  }

  // 获取当前索引
  getCurrIndex() {
    return this.currIndex;
  }
}
export default BaseSlider;
import { ELEMENT_NODE, SLIDER_ANIMATION_CLASSNAME } from "./base.js";
import { DEFAULTS } from "./constants.js";
相关代码：Slider
class Slider extends BaseSlider {
  constructor(el, options) {
    super(el, options);
    this._bindEvent();
  }
  _bindEvent() {
    keyBoard.bindEvent(this);
  }
}
export default Slider;
import keyBoard from "./keyBoard.js";
import BaseSlider from "./baseSlider.js";

import { DEFAULTS } from "./constants.js";
相关代码：keyBoard.js
import { LEFT_KEYCODE, RIGHT_KEYCODE } from "./constants.js";
const keyBoard = {
  bindEvent(slider) {
    document.addEventListener(
      "keyup",
      (ev) => {
        if (ev.keyCode === LEFT_KEYCODE) {
          slider.prev();
        } else if (ev.keyCode === RIGHT_KEYCODE) {
          slider.next();
        }
      },
      false
    );
  },
};
export default keyBoard;

写回答

1回答