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)
}
版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。