为了实现一个slidedoor的动画，当鼠标移动到图片上时，当前图片以及左边的图片会向左移动。
但是在浏览器中运行时发现只有当前图片左移，断点调试发现move(it,imgarr[j]);语句只有j是最后一个值的时候才执行一次，其他的j值都跳过move（）函数，并没有从j=1开始遍历执行到最后一个值。请问代码有什么问题？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{
margin:0;padding:0;
}
p{
position: relative;
margin-left:50px;
overflow:hidden;
height:477px;
width:957px;
}
img{
position:absolute;
display: block;
}
</style>
</head>
<body>
<p id="slidedoor">
<img src="./images/door1.png" alt="1080P神器">
<img src="./images/door2.png" alt="5.5寸四核">
<img src="./images/door3.png" alt="【2.2聚划算】四核5寸">
<img src="./images/door4.png" alt="5.7寸机皇">
</p>
<script type="text/javascript">
window.onload=function(){
//确保在所有文档加载完毕后执行
var slide=document.getElementById("slidedoor");
var imgarr=slide.getElementsByTagName("img");
var imgWidth=imgarr[0].offsetWidth;
var exposeWidth= 160;
var slideWidth=imgWidth+exposeWidth*(imgarr.length-1);
var tanslateWidth=imgWidth-exposeWidth;
slide.style.width=slideWidth+"px";
//图片初始化位置
function reset() {
for(var i=1;i<imgarr.length;i++){
imgarr[i].style.left=imgWidth+(i-1)*exposeWidth+"px";
}
}
reset();
for(var i= 0;i<imgarr.length;i++){
(function(i){
//立即调用函数确保每个img获得各自的函数，为了获得不同i值。
imgarr[i].onmouseover=function(){
//现将每个门复位
reset();
//将当前及之前的图片左移
for(var j=1;j<=i;j++){
//imgarr[j].style.left=parseInt(imgarr[j].style.left)-tanslateWidth+"px";
//将字符串转为数
(function(j){
var it=50+j*exposeWidth;
move(it,imgarr[j]);
})(j);
}
}
})(i);
}
}
var timer=null;
function move(itarget,box){
clearInterval(timer);
//var box=document.getElementById("box");
timer=setInterval(function(){
var speed=0;
if(box.offsetLeft>itarget){
speed=-1;
}else {
speed=1;
}
if(box.offsetLeft==itarget){
clearInterval(timer);
}else{
box.style.left=box.offsetLeft+speed+"px";
}
}, 0.01);
}
</script>
</body>
</html>
PHP中文网2017-04-10 16:01:17
你的timer变量只有一个，当移动第二个图片时，会把第一个的setInterval取消掉，第三个又会把第二个取消掉……所以只有最后一张图片才会真正地移动。
如果你把for(var j=1;j<=i;j++)改为for(var j=i;j>=1;j--)，也就是倒过来遍历，你会发现反过来了，只有第一张图片才会移动了。原因就是上面所说的。
大概帮你改了一下代码，几个图片可以一起动了，但是你的代码中还有很多问题，耐心点调试调试吧。
把move(it,imgarr[j])这句改为：
var timer = timers[j];
if (timer != null) clearInterval(timer);
timers[j] = move(it,imgarr[j]);修改timer的定义，名称改为timers，类型定义成数组：var timers=[];
move()函数内部，删除clearInterval这句，然后在timer前加上var：var timer = setInterval...
在move()函数最后返回timer：return timer;
代码太长就不贴了，按上面几步修改一下就能看到结果了。
巴扎黑2017-04-10 16:01:17
测试过 move函数是回执行的 而且不会跳过，不知道你什么情况 ,你设置的timer 好像也不是像你说的那样 左边和当前图片像左移 ，向左移动的话left值应该是减小而不是增大
伊谢尔伦2017-04-10 16:01:17
function move(itarget,box){
clearInterval(timer);每次执行move 都会clear timer啦
多次执行move的结果是，只有最后一个setInterval设置的定时器是有效的