Javascript Div移动位置和z索引

希望有人能帮助我，我不知道在哪里可以找到它

我正在尝试执行一个

onclick

事件，该事件将更改3

Div

s的位置

< div>放置在一个圆上，这意味着中间的一个应该是<代码> z索引：1 < /代码>

左右

z-index:-1

onclick

，左侧应滑动到中间并更改

z-index

从右向左，从中向右

我该怎么做呢？ 这样启动，但无法正确更改位置。
代码段：

var i = 0;
while(i < (threeleft-50)){

  var plus = (i)%2; 

  three.style.left    = (threeleft-i)+'px';
  two.style.left      = (twoleft+plus)+'px';
  one.style.left      = (oneleft+plus)+'px';
  i++;
} 

var i=0；
而(i(左三至五十)){
var plus=（i）%2；
three.style.left=（threeleft-i）+'px'；
two.style.left=（twoleft+plus）+'px'；
one.style.left=（oneleft+plus）+'px'；
i++；
} 

还需要一点动画，如果有更好的方法，让我知道

---

感谢您到目前为止

一个问题是，在

期间

屏幕不会更新，因此您将只看到最终位置，而不会看到动画。然后

plus=i%2

将始终返回0或1。这就是添加到

两个

和

一个

位置的内容。（您很可能需要

var plus=i/2；

那里）

一般来说，我会使用CSS来定位/设置元素的动画（通过转换），并使用JS更改类。更干净，更易于维护

函数goleft（）{
var one=document.querySelector（'.pos one'），
two=document.querySelector（'.pos two'），
三=document.querySelector（“.pos三”）；
1.classList.remove（'pos-one'）；
1.classList.add（'pos-two'）；
2.classList.remove（'pos-two'）；
2.classList.add（'pos-three'）；
三.类列表.删除（'pos-three'）；
三.类列表.添加（'pos-one'）；
}
功能权限（）{
var one=document.querySelector（'.pos one'），
two=document.querySelector（'.pos two'），
三=document.querySelector（“.pos三”）；
1.classList.remove（'pos-one'）；
1.classList.add（'pos-three'）；
2.classList.remove（'pos-two'）；
2.classList.add（'pos-one'）；
三.类列表.删除（'pos-three'）；
三.类列表.添加（'pos-two'）；
}

.wrapper{
位置：相对位置；
宽度：800px；
高度：400px；
边缘顶部：100px；
左边距：自动；
右边距：自动；
背景颜色：灰色；
}
图{
宽度：300px；
高度：300px；
位置：绝对位置；
边框：3倍纯黑；
过渡：均为0.5s；
}
#一个{
背景色：红色；
}
#两个{
背景颜色：蓝色；
}
#三{
背景颜色：绿色；
}
1号位置{
z指数：150；
顶部：50px；
左：250px；
}
2号位置{
z指数：50；
顶部：40px；
左：50px；
}
3号位置{
z指数：50；
顶部：40px；
左：450px；
}
#机器人{
位置：绝对位置；
底部：0px；
左：360px；
}

1.
2.
3.
左边
正确的

一个问题是，在

while

期间，屏幕不会更新，因此您只能看到最终位置，而不会看到动画。然后

plus=i%2

将始终返回0或1。这就是添加到

两个

和

一个

位置的内容。（您很可能需要

var plus=i/2；

那里）

一般来说，我会使用CSS来定位/设置元素的动画（通过转换），并使用JS更改类。更干净，更易于维护

函数goleft（）{
var one=document.querySelector（'.pos one'），
two=document.querySelector（'.pos two'），
三=document.querySelector（“.pos三”）；
1.classList.remove（'pos-one'）；
1.classList.add（'pos-two'）；
2.classList.remove（'pos-two'）；
2.classList.add（'pos-three'）；
三.类列表.删除（'pos-three'）；
三.类列表.添加（'pos-one'）；
}
功能权限（）{
var one=document.querySelector（'.pos one'），
two=document.querySelector（'.pos two'），
三=document.querySelector（“.pos三”）；
1.classList.remove（'pos-one'）；
1.classList.add（'pos-three'）；
2.classList.remove（'pos-two'）；
2.classList.add（'pos-one'）；
三.类列表.删除（'pos-three'）；
三.类列表.添加（'pos-two'）；
}

.wrapper{
位置：相对位置；
宽度：800px；
高度：400px；
边缘顶部：100px；
左边距：自动；
右边距：自动；
背景颜色：灰色；
}
图{
宽度：300px；
高度：300px；
位置：绝对位置；
边框：3倍纯黑；
过渡：均为0.5s；
}
#一个{
背景色：红色；
}
#两个{
背景颜色：蓝色；
}
#三{
背景颜色：绿色；
}
1号位置{
z指数：150；
顶部：50px；
左：250px；
}
2号位置{
z指数：50；
顶部：40px；
左：50px；
}
3号位置{
z指数：50；
顶部：40px；
左：450px；
}
#机器人{
位置：绝对位置；
底部：0px；
左：360px；
}

1.
2.
3.
左边
正确的