轮播图实现

Posted 2021-03-14 foreversimon

// 计算当前图片位置
count = 0
timeset() {
    this.count += -100
    if (this.count == -700) {
      this.count = 0
    }
}

// 滑动主要函数
slide() {
  const imgList = this.sliderIMG.nativeElement.getElementsByTagName(‘li‘)
  this.timeset()
  for(let i=0; i < imgList.length; i++){
    imgList[i].style.transform = ‘translateX(‘+ this.count +‘%)‘ // 先确定变化位置
    imgList[i].style.transition = ‘transform 0.5s‘ //设定变化动画
  }
}

// 每运行2秒执行一次
  imgSlid = setInterval(() => {
    this.slide()
  },2000)

// 停止滑动
  stopSlide() {
    this.flag = !this.flag
    if (this.flag) {
      this.stop_button.nativeElement.className = "glyphicon glyphicon-pause"
      this.imgSlid = setInterval(() => {
        this.slide()
      },2000)
    } else {
      this.stop_button.nativeElement.className = "glyphicon glyphicon-play"
      clearInterval(this.imgSlid)
    }
    console.log(this.flag)
  }

//选择需要跳转的图片
  onClick(val) {
    const imgList = this.sliderIMG.nativeElement.getElementsByTagName(‘li‘)
    this.count = val
    for(let i=0; i < imgList.length; i++){
      imgList[i].style.transform = ‘translateX(‘+ this.count +‘%)‘
    }
  }