老师，请检查，哪里需要改进
index.html:
<!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 src="./js/index.js"></script> --> <script src="./js/index.js" type="module"></script> </body> </html>
base.js:
import DEFAULTS from './defaults.js';
import {ELEMENT_NODE,SLIDER_ANIMATION_CLASSNAME} from './constant.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;Slider.js:
import BaseSlider from './base.js';
import keyboardEvent from './keyboardEvent.js';
class Slider extends BaseSlider {
constructor(el, options) {
super(el, options);
this._bindEvent();
}
_bindEvent() {
keyboardEvent.bindEvent(this);
}
}
export default Slider;defaults.js:
// 默认参数
const DEFAULTS = {
// 初始索引
initialIndex: 0,
// 切换时是否有动画
animation: true,
// 切换速度，单位 ms
speed: 300
};
export default DEFAULTS;constant.js:
export const ELEMENT_NODE = 1; export const SLIDER_ANIMATION_CLASSNAME = 'slider-animation';
index.js:
import Slider from './Slider.js';
new Slider(document.querySelector('.slider'));keyboardEvent.js:
const keyboardEvent = {
bindEvent(slider){
document.addEventListener(
'keyup',
ev => {
if (ev.keyCode === 37) {
slider.prev();
} else if (ev.keyCode === 39) {
slider.next();
}
},
false
);
}
}
export default keyboardEvent;12
收起
正在回答 回答被采纳积分+1
相似问题
登录后可查看更多问答，登录/注册
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星