码迷,mamicode.com
首页 > 其他好文 > 详细

轮播图实现

时间:2020-01-24 22:29:01      阅读:86      评论:0      收藏:0      [点我收藏+]

标签:slider   img   click   lse   动画   lag   get   slide   console   

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

 

轮播图实现

标签:slider   img   click   lse   动画   lag   get   slide   console   

原文地址:https://www.cnblogs.com/foreversimon/p/12232613.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!