麻烦老师检查优化一下，谢谢
来源：4-4 自由编程
向金伟
2022-07-16 01:06:14
<!DOCTYPE html> <html> <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/newslider.js" type="module"></script> </body> </html>
相关代码：
import {Slider} from './index.js';
new Slider(document.querySelector('.slider'));相关代码：
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);
}
}
export {Slider};相关代码：
// 默认参数
import {DEFAULTS} from './default.js';
// base
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 {BaseSlider};相关代码：
const keyboard = {
bindEvent(slider) {
document.addEventListener(
'keyup',
ev => {
if (ev.keyCode === 37) {
slider.prev();
} else if (ev.keyCode === 39) {
slider.next();
}
},
false
);
}
}
export {keyboard};相关代码：
const DEFAULTS = {
// 初始索引
initialIndex: 0,
// 切换时是否有动画
animation: true,
// 切换速度，单位 ms
speed: 300
};
export {DEFAULTS};相关代码：
const ELEMENT_NODE = 1;
const SLIDER_ANIMATION_CLASSNAME = 'slider-animation';
export {ELEMENT_NODE, SLIDER_ANIMATION_CLASSNAME};写回答
1回答
-
好帮手慕小李
2022-07-16
同学你好，代码可以实现需求很棒，并不需要在做优化了，祝学习愉快！
0
相似问题