轮播图实现
作者:互联网
// 计算当前图片位置 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 +'%)' } }
标签:count,glyphicon,轮播,实现,imgList,nativeElement,transform,flag 来源: https://www.cnblogs.com/foreversimon/p/12232613.html