使用Javascript制作动画

我希望div从左向右滑动，然后在使用JavaScript到达浏览器末尾时从右向左再次滑动

var imgObj=null；
变量动画；
函数init（）{
imgObj=document.getElementById（'animate'）；
imgObj.style.position='fixed'；
imgObj.style.left='0px'；
moveRight（）；
}
函数moveRight（）{
imgObj.style.left=parseInt（imgObj.style.left）+1+'%'；
如果（imgObj.style.left==“95%”）{
clearTimeout（动画）
警惕（“我在这里”）
左移（）；
}
动画=设置超时（moveRight，20）；
}
函数moveLeft（）{
imgObj.style.left=parseInt（imgObj.style.left）-1+'%'；
如果（imgObj.style.right==“95%”）{
clearTimeout（动画）
警惕（“我在这里2”）
moveRight（）；
}
animate=setTimeout（moveLeft，20）；
}
window.onload=init
#制作动画{
宽度：5%；
身高：10%；
背景色：红色；
}
这是一个类似的动画示例，由按钮启动。您应该始终使用变量来更改值，而不仅仅是将值硬记录到元素。在本例中，pos是经过更改（pos++和pos-）然后添加到style属性的变量

在您的代码中，我认为您从未停止增加%值。所以它陷入了一个永远+1-1+1-1的场景中


函数myMove（）{
var elem=document.getElementById（“myAnimation”）；
var-pos=0；
var id=设置间隔（第10帧）；
函数框架（）{
如果（位置==100）{
清除间隔（id）；
警惕（“完成”）；
myMove2（）；
}否则{
pos++；
elem.style.left=pos+'%'；
}
}
}
函数myMove2（）{
var elem=document.getElementById（“myAnimation”）；
var pos=100；
var id=设置间隔（第10帧）；
函数框架（）{
如果（位置==0）{
清除间隔（id）；
警报（“done2”）；
myMove（）；
}否则{
pos--；
elem.style.left=pos+'%'；
}
}
}
#我的动画{
宽度：50px；
高度：50px；
位置：绝对位置；
背景色：红色；
}

点击我

知道它为什么卡住了吗？在我的示例中，您有setInterval参数，它定义函数在指定的时间段内执行。一旦到达切换点，它就会被clearInterval（）清空。这意味着在我的示例中，第一个函数停止执行。在您的示例中，您启动了第二个函数，但从未停止第一个函数的运行。所以你们两个同时跑