老师我的按键盘左右健没有反应

base.js

import {ELEMENT_NODE_TYPE} from './constants.js';

import{DEFAULTS} from './default.js';

class BaseSlider{

constructor(el,options){

if(el.nodeType!=ELEMENT_NODE_TYPE){

console.log('不是DOM元素');

console.log(el.nodeType);

}

this.options={

...DEFAULTS,

...options,

};

const sliderEL=el;

const sliderContenEL=sliderEL.querySelector('.slider-content');

const sliderItemEls=sliderContenEL.querySelectorAll('.slider-item');

this.sliderEL=sliderEL;

this.sliderContenEL=sliderContenEL;

this.sliderContentEls=sliderItemEls;

this.minIndex=0;

this.maxIndex=sliderItemEls.length-1;

this.currIndex=this.getCorrectedIndex(this.options.initialIndex);

this.itemWidth=sliderItemEls[0].offsetWidth;

this.init();

}

init(){

this.setltemsWidth();

this.setContentWidth();

this.move(this.getDistance());

if(this.options.animation){

this.openAnimation();

}

if(this.options.autoplay){

this.autoplay();

}

}

to(index){

index=this.getCorrectedIndex(index);

if(this.currIndex===index) return;

this.currIndex=index;

const distance=this.getDistance();

if(this.options.animation){

this.moveWithAnimation(distance);

this.move(distance);

}

}

prev(){

this.to(this.currIndex-1 )

}

next(){

this.to(this.currIndex+1)

}

autoplay(){

const {autoplay}=this.options;

if(this.options.autoplay<=0) return;

this.pause();

this.autoplayTimer=setInterval(()=>{

this.next();

},autoplay)

}

pause(){

clearInterval(this.autoplayTimer);

}

openAnimation(){

this.sliderContenEL.classlist.add('slider-animation');

}

moveWithAnimation(distance){

this.setAnimationSpeed();

this.move(distance);

this.sliderContentEl.addEventListtener('transitionend',()=>{

this.closeAnimation();

},false)

}

closeAnimation(){

this.setAnimathionSpeed(0);

}

setAnimationSpeed(speed=this.options.speed){

this.sliderContentEl.style.transitionDuration=`${speed}ms`

}

getDistance(index=this.currIndex){

return -this.itemWidth*index;

}

move(distance){

this.sliderContenEL.style.transform=`translate3d(${distance}px,0px,0px)`

}

setltemsWidth(){

for(const item of this.sliderContentEls){

item.style.width=`${this.itemWidth}px`

}

}

setContentWidth(){

this.sliderContenEL.style.width=`${this.itemWidth*this.sliderContentEls.length}px`

}

getCorrectedIndex(index){

if(index<this.minIndex) return this.maxIndex;

if(index>this.maxIndex) return this.minIndex;

return index;

}

}

export default BaseSlider;

constants.js

//keyboard

export const LEFT_KEYCODE=37;

export const RIGHT_KEYCODE=39;

//base

export const ELEMENT_NODE_TYPE=1;

default.js

//默认参数

const DEFAULTS={

//初始索引

initialIndex:0,

//切换时是否有动画

animation:true,

//切换速度，单位ms

speed:300,

//自动切换，单位ms

autoplay:0,

}

export default DEFAULTS;

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;

index.js

import BaseSlider from './base.js';

import keydoard from './keyboard.js';

class Slider extends BaseSlider{

constructor(el,options){

super(el,options);

this.bindEvent();

}

bindEvent(){

keydoard.bindEvent(this);

}

}

export default Slider;