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

开发者社区> 杨冬芳> 正文

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

2016-06-06 16:00:50 1574 1
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)

  }
取消 提交回答
全部回答(1)
  • 杨冬芳
    2019-07-17 19:28:51

    定条件不变就好了

    0 0
相关问答

11

回答

在阿里云上安装和运行Node.js全功略

ycwong 2013-09-18 15:17:30 64014浏览量 回答数 11

19

回答

【分享】如何提高网站的打开速度?

enj0y 2012-11-17 14:35:22 56718浏览量 回答数 19

145

回答

【新手入门】云服务器linux使用手册

fanyue88888 2012-11-26 17:14:18 157062浏览量 回答数 145

28

回答

钉钉开放平台“常见问题常见问题常见问题“重要请关注

竹梅 2015-12-03 00:39:14 92852浏览量 回答数 28

22

回答

爬虫数据管理【问答合集】

我是管理员 2018-08-10 16:37:41 146765浏览量 回答数 22

31

回答

[@倚贤][¥20]刚学完html/css/js的新手学习servlet、jsp需要注意哪些问题?

弗洛伊德6 2018-10-27 21:52:43 145595浏览量 回答数 31

23

回答

【云服务器分享】网站访问速度快才是硬道理

dreamdoo 2012-10-15 10:15:02 85180浏览量 回答数 23

13

回答

【云服务器分享】如何节省网站流量

dreamdoo 2012-10-15 10:36:09 80108浏览量 回答数 13

14

回答

对象存储oss【问答合集】

我是管理员 2018-08-03 14:54:02 67359浏览量 回答数 14

2

回答

Nginx—owncloud安装记事

寒喵 2014-06-07 23:24:41 48512浏览量 回答数 2
+关注
杨冬芳
IT从业
1
文章
9167
问答
推荐问答
相关电子书
更多
文娱运维技术
立即下载
《SaaS模式云原生数据仓库应用场景实践》
立即下载
《看见新力量:二》电子书
立即下载