老师，请检查谢谢

来源：4-4 自由编程

张小阳_

2022-11-15 00:19:40

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <title>Module 的基本用法</title>
  <link rel="stylesheet" href="./css/slider.css" />
</head>

<body>
  <div class="slider-layout">
    <div class="slider">
      <div class="slider-content">
        <div class="slider-item">
          <a href="javascript:;"><img src="./imgs/1.jpg" alt="1" class="slider-img" /></a>
        </div>
        <div class="slider-item">
          <a href="javascript:;"><img src="./imgs/2.jpg" alt="1" class="slider-img" /></a>
        </div>
        <div class="slider-item">
          <a href="javascript:;"><img src="./imgs/3.jpg" alt="1" class="slider-img" /></a>
        </div>
        <div class="slider-item">
          <a href="javascript:;"><img src="./imgs/4.jpg" alt="1" class="slider-img" /></a>
        </div>
      </div>
    </div>
  </div>
  <!-- <script src="./js/base.js"></script> -->
  <script type="module" src="./js/index.js"></script>
</body>

</html>

import BaseSlider from "./base.js";     // 导入需要继承的父类
import Keyboard from './keyboard.js';     // 导入鼠标控制方法

class Slider extends BaseSlider {
    constructor(el, options) {
        super(el, options);
        this._bindEvent();
    }

    _bindEvent() {
        Keyboard.bindEvent(this);   // this指向当前的Slider实例对象
    }
}

export default Slider;

// 左右键码
import { LEFT_KEYCODE, RIGHT_KEYCODE } from "./constants.js";

const keyboard = {
    bindEvent(Slider) {       // 因为到这里的模块，原来的this没有了，所以我们将原来指向Slider实例化对象的this作为参数传过来
        document.addEventListener(      // this依然指向Slider的实例化对象
            'keyup',
            ev => {
                if (ev.keyCode === LEFT_KEYCODE) {
                    Slider.prev();
                } else if (ev.keyCode === RIGHT_KEYCODE) {
                    Slider.next();
                }
            },
            false
        );
    }
}

export default keyboard;

// 导入默认参数
import DEFAULTS from './defaults.js';
// 常量
import { ELEMENT_NODE, SLIDER_ANIMATION_CLASSNAME } from './constants.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 Slider from "./slider.js";

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

// 专放常量的模块


// base
export const ELEMENT_NODE = 1;
export const SLIDER_ANIMATION_CLASSNAME = 'slider-animation';

// 以下这种方式也可以
// export { ELEMENT_NODE, SLIDER_ANIMATION_CLASSNAME };

// 左右键码
export const LEFT_KEYCODE = 37;
export const RIGHT_KEYCODE = 39;

// 默认参数
// const DEFAULTS = {
//     // 初始索引
//     initialIndex: 0,
//     // 切换时是否有动画
//     animation: true,
//     // 切换速度，单位 ms
//     speed: 300
// };

// 方式1
// export default DEFAULTS;

// 方式2
export default {
    // 初始索引
    initialIndex: 0,
    // 切换时是否有动画
    animation: true,
    // 切换速度，单位 ms
    speed: 300
};

写回答

1回答