轮播图实现

Posted foreversimon

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了轮播图实现相关的知识,希望对你有一定的参考价值。

// 计算当前图片位置
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 +‘%)‘
    }
  }

 

以上是关于轮播图实现的主要内容,如果未能解决你的问题,请参考以下文章

js实现效果:循环轮播图

js实现左右切换轮播图思路

Vue实现轮播图

原生js-实现轮播图效果

无缝轮播图的一种方式原理

Vue轮播图的实现及其与jQuery轮播图的简单对比|饥人谷前端教程