为了实现一个slidedoor的动画,当鼠标移动到图片上时,当前图片以及左边的图片会向左移动。

但是在浏览器中运行时发现只有当前图片左移,断点调试发现move(it,imgarr[j]);语句只有j是最后一个值的时候才执行一次,其他的j值都跳过move()函数,并没有从j=1开始遍历执行到最后一个值。请问代码有什么问题?
Document
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
你的
timer变量只有一个,当移动第二个图片时,会把第一个的setInterval取消掉,第三个又会把第二个取消掉……所以只有最后一张图片才会真正地移动。如果你把
for(var j=1;j<=i;j++)改为for(var j=i;j>=1;j--),也就是倒过来遍历,你会发现反过来了,只有第一张图片才会移动了。原因就是上面所说的。大概帮你改了一下代码,几个图片可以一起动了,但是你的代码中还有很多问题,耐心点调试调试吧。
把
move(it,imgarr[j])这句改为:修改
timer的定义,名称改为timers,类型定义成数组:var timers=[];move()函数内部,删除clearInterval这句,然后在timer前加上var:var timer = setInterval...在
move()函数最后返回timer:return timer;代码太长就不贴了,按上面几步修改一下就能看到结果了。
测试过
move函数是回执行的 而且不会跳过,不知道你什么情况 ,你设置的timer 好像也不是像你说的那样 左边和当前图片像左移 ,向左移动的话left值应该是减小而不是增大每次执行move 都会clear timer啦
多次执行move的结果是,只有最后一个setInterval设置的定时器是有效的