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

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

baseSlider

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

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;
}

早点休息吧明天还要写代码 2022-07-23

源自：“仿穷游”首页组件化开发 5-5 功能实现-3

收起

1回答

好帮手慕小李回答被采纳获得+3积分 2022-07-23 12:01:33

同学你好，没有实现的原因大概率是因为sliderEl没有被获取到所造成的，同学检查一下是否控制台中有报错。另同学给的这一部分代码老师没办法进行复现问题的操作，同学可以点击老师的头像然后点击关注给老师发送一条私信，老师这边把客服的联系方式给到同学，同学加上以后把项目整个代码打包发过来，老师这边测一下看看。

祝学习愉快！

收起回答