Carousel Figure realization

// calculate the current picture position 
count = 0
timeset() {
    this.count += -100
    if (this.count == -700) {
      this.count = 0
    }
}

// sliding main function 
slide () {
  const imgList = this.sliderIMG.nativeElement.getElementsByTagName('li')
  this.timeset()
  for(let i=0; i < imgList.length; i++){
    imgList [I] .style.transform = 'the translateX (' + the this .count + '%)' // first determine the change in the position 
    imgList [I] = .style.transition 'Transform 0.5s' // set changes in the motion 
  }
}

// every 2 sec performed once 
  imgSlid the setInterval = (() => {
     the 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)
  }

// Select jump picture 
  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 +'%)'
    }
  }

 

Guess you like

Origin www.cnblogs.com/foreversimon/p/12232613.html