写了一个简单的轮播碰到一些问题求指导 -问答-阿里云开发者社区-阿里云

开发者社区> 问答> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

写了一个简单的轮播碰到一些问题求指导

function rollAmn() {
    var length = 0
    var oRoll = document.querySelector('.header')

    setInterval(function () {
      if (length == -300) {
        length = 0
        /* 注释一
        oRoll.classList.remove('roll')
        oRoll.style.left = length + '%'
        */
      }
      length += -100
      /* 注释二
      oRoll.classList.add('roll')
      oRoll.style.left = length + '%'
      */
    }, 2000)

  }

四张图,第四张和第一张是同一张,想法是if到达第四张时去除transition属性然后left归0回到初始状态,但是貌似是js代码执行过快的原因注释一的代码虽然执行了但接着执行了注释二的代码浏览器直接渲染注释二执行后的状态,于是在到达第四张时下一个动作是直接往左滑动回到{left:-100%}也就是第二张的状态,如果打断点一步步执行时能达成无缝滑动的

于是我就把if的判定放到注释二下面,判定条件改为if(length = -400)但这样第四张图和第一张图都等待了2s,给人造成了一种有一张图等待时间会更长些的错觉,如果每张图等待时间是5s就容易出破绽了

请问这种中间改变样式代码无法被渲染的问题以及多2s等待的问题有什么解决办法吗?

好了大概修改成功过的代码是这样:

function rollAmn() {

    var length = 0
    var oRoll = document.querySelector('.header')
    var nImgLength = -(document.querySelectorAll('.header li').length - 1) * 100

    setInterval(function () {
      length += -100     
      oRoll.style.left = length + '%'

      if (length === nImgLength) {
      
        setTimeout(function () {
          length = 0
          oRoll.classList.remove('roll')
          oRoll.style.left = '0'         
        }, 500)
        
        oRoll.classList.add('roll')

      }

    }, 4000)

  }

展开
收起
杨冬芳 2016-06-06 16:00:50 1863 0
1 条回答
写回答
取消 提交回答
  • 杨冬芳
    IT从业

    定条件不变就好了

    2019-07-17 19:28:51
    赞同 展开评论 打赏
问答排行榜
最热
最新
相关电子书
更多
3D动画的菜谱式灯光与云渲染
立即下载
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载