老师,我这个为什么执行不出来

老师,我这个为什么执行不出来

import { SLIDER_ANIMATION_CLASS_NAME } from "./constants";
import DEFAULTS from './defaults'
class BaseSlider{
  constructor(el,options){
    if(el.nodetype!==1){
      throw new Error('实例化的时候,请传入DOM元素!');
    }
    this.options={
      ...DEFAULTS,
      ...options
    };
    const sliderEl=el;
    const sliderContentEl=document.querySelector('.slider-content');
    const sliderItemEls=sliderContentEl.querySelectorAll('.slider-item');
    this.sliderEl=sliderEl;
    this.sliderContentEl=sliderContentEl;
    this.sliderItemEls=sliderItemEls;
    this.minIndex=0;
    this.maxIndex=sliderItemEls.length-1;
    this.currIndex=this.getCorrectedIndex(this.options.initalIndex);
    this.itemWidth=sliderItemEls[0].offsetWidth;
    this.init();
  }
  getCorrectedIndex(index){
    if(index<this.minIndex) return this.maxIndex;
    if(index>this.maxIndex) return this.minIndex;
    return index;
  }
  init(){
    //设置sliderItemEls的宽度
    this.setItemWidth();
    //设置sliderContentEl的宽度
    this.setContentWidth();
    this.move(this.getDistance());
    if(this.options.animation){
      this.openAnimation();
    }
    if(this.options.autoplay){
      this.autoplay();
    }
  }
  next(){
    this.to(this.currIndex+1);
  }
  prev(){
    this.to(this.currIndex-1);
  }
  to(index){
    index=this.getCorrectedIndex(index);
    if(this.currIndex===index)return;
    this.currIndex=index;
    const distance=this.getDistance();
    if(this.options.animation){
      this.moveWidthAnimation(distance);
    }else{
      this.move(distance);
    }
  }
  pause(){
    clearInterval(this.autoplayTimer)
  }
  setItemWidth(){
    for(const item of sliderItemEls){
      item.style.width=`${itemWidth}px`;
    }
  }
  setContentWidth(){
    this.sliderContentEl.style.width=`${this.itemWidth*this.sliderItemEls.length}px`;
  }
  move(distance){
    this.sliderContentEl.style.transform=`translate3d(${distance}px,0px,0px)`;
  }
  getDistance(index=this.currIndex){
    return this.itemWidth*index;
  }
  openAnimation(){
    this.sliderContentEl.classList.add(SLIDER_ANIMATION_CLASS_NAME);
  }
  closeAnimation(){
    this.setAnimationSpeed(0);
  }
  moveWidthAnimation(distance){
    this.setAnimationSpeed();
    this.move(distance);
    this.sliderContentEl.addEventListener('transitionend',()=>{
      this.closeAnimation();
    },false)
  }
  setAnimationSpeed(speed=this.options.speed){
    this.sliderContentEl.style.transitionDuration=`${speed}ms`
  }
  autoplay(){
    const {autoplay}=this.options;
    if(autoplay<=0) return;
    this.pause();
    this.autoplayTimer=setInterval(()=>{
      this.next();
    },autoplay)
  }

}
export default BaseSlider;

https://img1.sycdn.imooc.com/climg/662474b90958a6fd13290631.jpg

正在回答 回答被采纳积分+1

登陆购买课程后可参与讨论,去登陆

1回答
好帮手慕小李 2024-04-22 09:48:50

同学你好,仅凭一部分代码和一张截图老师也不能回答同学的问题,另外同学的提问方式老师建议要换一换,如:根据上述代码及下面的截图,代码没有实现xxx需求。另外给代码要给全,并不是一段儿。另外同学根据你下面的截图可以看出,幻灯片的css样式还没有实现呢,一般来说我们做开发时,都是先完成css部分以后再说js的部分(重点)


同学可以尝试将自己的代码跟资料里的代码进行融合测试一下是不是js的问题(个人认为js可能没什么问题,问题出在css没有完善所以导致js的效果)


如果还不行,那么同学去将问题的项目整体打包发个网盘分享给我,老师这边来进行测试。


祝学习愉快!

  • 提问者 慕粉1112348 #1

    链接:https://pan.baidu.com/s/1qmkAWwEu_Bdro5T1E070oA 

    提取码:lw9p

    老师你看下这个为什么幻灯片把二级菜单弄没了,而且效果和视频里的不一样

    https://img1.sycdn.imooc.com/climg/66260a5609bf7f1913550651.jpg

    2024-04-22 14:57:28
  • 好帮手慕小李 回复 提问者 慕粉1112348 #2

    这里有报错,所以js直接被组织往下渲染了。

    https://img1.sycdn.imooc.com/climg/662614c8096ffee107740153.jpg

    原因是这里没有获取到,它是个null

    https://img1.sycdn.imooc.com/climg/662615730999e60210830663.jpg

    https://img1.sycdn.imooc.com/climg/66261779090d6d4c09270262.jpg

    最后破案了:

    https://img1.sycdn.imooc.com/climg/66261cc309a4876806600293.jpg

    这里是个闭合标签应该是</div>


    2024-04-22 16:16:21
  • 提问者 慕粉1112348 #3

    终于好了,老师还有这个机酒自由行布局为什么会这样了

    https://img1.sycdn.imooc.com/climg/66278bf7094c83a012610620.jpg

    2024-04-23 18:22:50
问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师