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