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

100

101

102

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;

慕粉1112348 2024-04-21

源自：“仿穷游”首页组件化开发 5-6 使用Ajax获取数据-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
老师你看下这个为什么幻灯片把二级菜单弄没了，而且效果和视频里的不一样

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

这里有报错，所以js直接被组织往下渲染了。
原因是这里没有获取到，它是个null
最后破案了：
这里是个闭合标签应该是</div>

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

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

2024-04-23 18:22:50