老师请问为什么我的鼠标进入后没有暂停切换

在别的地方测试时都是可以的，不知道为什么这里就暂停不了了,小圆点和按钮的功能都能实现所以没有粘贴那部分代码。就是自动播放时，鼠标进入后没有执行暂停

baseSlider

import DEFAULTS from './defaults.js';
import {NODE_TYPE_DOM} from './constants.js';
import circles from './circles.js';

// 幻灯片基类
class BaseSlider{
    constructor(el,options){
        if(el.nodeType!==NODE_TYPE_DOM) throw new Error('必须使用dom元素');

        // 获取外层父盒子，ul和li标签
        const sliderEl = el;
        const sliderContent = sliderEl.querySelector('.slider-content');
        // 先复制第一个li标签
        this.cloneLastNode(sliderContent);
        // 给最后一个li添加classname
        sliderContent.lastElementChild.className='slider-item';
        // 获取所有li
        const sliderItems = sliderContent.querySelectorAll('.slider-item');

        this.sliderEl = sliderEl;
        this.sliderContent=sliderContent;
        this.sliderItems=sliderItems;

        // 获取options默认值
        this.options = {...DEFAULTS,...options};

        // li的宽度
        this.itemWidth = sliderItems[0].offsetWidth;

        // 最大最小索引值和当前索引
        this.miniIndex = 0;
        this.maxIndex = sliderItems.length-1;
        this.currentIndex = this.correctIndex(this.options.initialIndex,this.maxIndex);

        this.init();
    }

    init(){
        // 给li添加宽度
        for(let item of this.sliderItems){
            item.style.width = `${this.itemWidth}px`;
        }

        // 给ul添加宽度
        this.sliderContent.style.width =`${
            this.itemWidth*this.sliderItems.length
        }px`;

        // 无动画移动,确认第一张动画位置
        this.move(this.toDistance());

        // 自动移动
        this.autoplay();
    }

    // 复制第一个元素节点
    cloneLastNode(fatherNode){
        const lastchild = fatherNode.firstElementChild.cloneNode(true);
        fatherNode.appendChild(lastchild);
    }
    
    // 判断正确index值
    correctIndex(index,max){
        if(index<this.miniIndex){return max};
        if(index>max){return this.miniIndex};
        return index;
    }

    // 移动
    move(distance){
        this.sliderContent.style.transform = `translateX(-${distance}px)`; 
    }

    // 带动画的移动
    moveWithAnimation(index){
        this.openAnimation();
        this.currentIndex=index;
        this.move(this.toDistance());
    }

    // 移动距离
    toDistance(index=this.currentIndex){
        return this.itemWidth*index;
    }

    // 切换到索引值对应的下一张
    to(index,next=true){
        if(this.options.animation){
            // 分开写next和prev的两种情况
            if(next){
                // 右移动
                this.moveNext(index);
            }else{
                // 左移动
                this.movePrev(index);
            }
        }else{
            // 无动画移动
            index = this.correctIndex(index,this.maxIndex-1);
            if(this.currentIndex==index) return;
            this.currentIndex = index;

            this.move(this.toDistance());
        }

        // 判断是否有小圆点并设置
        if(this.options.withCircles){
            circles.changeCircle(this);
        }
    }

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

    // 切换到上一张
    prev(){
        // false为不是next的情况
        this.to(this.currentIndex-1,false);
    }

    // 自动播放
    autoplay(){
        if(this.options.autoplay<=0) return;

        this.pause();
        this.timer = setInterval(()=>{
            if(this.options.autoplayDirection=='next'){
                this.next();
            }else{
                this.prev();
            }
        },this.options.autoplay);
    }

    pause(){
        clearInterval(this.timer);
    }

    //开启动画
    openAnimation(){
        this.sliderContent.style.transition = 
        `transform ${this.options.animationDuration}s ${this.options.animationDelay}s ${this.options.animationType}`;
    }


    // 关闭动画
    closeAnimation(){
        this.sliderContent.style.transition='none';
    }

    //右移动带动画
    moveNext(index){
        this.moveWithAnimation(index);
        if(index==this.maxIndex){
            setTimeout(()=>{
                index = 0;
                this.currentIndex = index;
                this.move(0);
                this.closeAnimation();
            },this.options.animationDuration*1000)
        }
    }

    // 左移动带动画
    movePrev(index){

        // 切到第一张时，快速变为最后一张
        // 再用动画改到倒数第二张
        if(index<0){
            this.closeAnimation();
            this.move(this.toDistance(this.maxIndex));
            setTimeout(()=>{
                index = this.maxIndex-1;
                this.moveWithAnimation(index);
            },0);
            this.currentIndex=this.maxIndex-1;
        }else{
            this.moveWithAnimation(index);
        }
        
    }

}

export default BaseSlider;

slider

import button from './button.js';
import circles from './circles.js';
import BaseSlider from './baseSlider.js';

class Slider extends BaseSlider{
    constructor(el,options){
        // 继承父类
        super(el,options);
        this.bindEvent();
    }

    bindEvent(){

        // 判断是否有自动播放
        if(this.options.autoplay>0){
        // 自动播放时鼠标移入暂停，移出继续
        this.sliderEl.onmouseenter = ()=>{  //此处必须用箭头函数
            this.pause();
        }

        // 鼠标移出继续
        this.sliderEl.onmouseleave = ()=>{
            this.autoplay();
    }

    // 按钮控制左右
    if(this.options.withBtn){

        button.bindEvent(this);

    }

    // 小圆点切换
    if(this.options.withCircles){

        circles.bindEvent(this);
    }
    }
}
}

export default Slider;

默认值

const DEFAULTS = {
    // 初始索引值
    initialIndex:0,

    // 是否有动画
    animation:true,

    // 动画时长(秒)
    animationDuration:0.3,

    // 动画类型
    animationType:'linear',

    // 动画延时(秒)
    animationDelay:0,

    // 是否自动播放,0为否，大于0位自动播放的切换间隔
    autoplay:0,

    // 自动播放为左切还是右切
    autoplayDirection:'next',

    // 判断是否有小圆点
    withCircles:true,

    // 判断是否带按钮
    withBtn:false
}

export default DEFAULTS;

slider的实例

import Slider from './slider';

const sliderEl = document.getElementById('slider');
const slider = new Slider(
    sliderEl,{
        animation:true,
        withCircles:true,
        withBtn:true,
        autoplay:3000,
        initialIndex:0
    }
);

export default slider;

html结构

<div class="slider" id='slider'>
    <ul class="slider-content">
        <li class='slider-item'>
            <a href='javascript:;'>
                <img src="images/banner_01.jpg" alt="" class='slider-img'>
            </a>
        </li>
        <li class='slider-item'>
            <a href='javascript:;'>
                <img src="images/banner_02.jpg" alt="" class='slider-img'>
            </a>
        </li>
        <li class='slider-item'>
            <a href='javascript:;'>
                <img src="images/banner_03.jpg" alt="" class='slider-img'>
            </a>
        </li>
        <li class='slider-item'>
            <a href='javascript:;'>
                <img src="images/banner_04.jpg" alt="" class='slider-img'>
            </a>
        </li>
        <li class='slider-item'>
            <a href='javascript:;'>
                <img src="images/banner_05.jpg" alt="" class='slider-img'>
            </a>
        </li>
    </ul>
    <div class="circles" id="circles">
        <ol>
            <li data-n='0' class="current"></li>
            <li data-n='1'></li>
            <li data-n='2'></li>
            <li data-n='3'></li>
            <li data-n='4'></li>
        </ol>
    </div>
</div>

css

.slider, .slider-content,.slider-item,.slider-img{
  width:100%;
  height:100%;
}
.slider{
  width:100%;
  height:456px;
  overflow:hidden;
}
.slider-item{
  float:left;
}
.slider-img{
  vertical-align:middle;
}