                        课程
                    
                        /前端开发
                        
                            /JavaScript
                        
                        /JS实现“旋转木马”幻灯片效果

关于zIndex的问题

还是不是很清楚为什么zIndex放在css中的话，就会一直显示最后一张的zIndex值，就会错乱。老师，求解答，谢谢啦

weibo_再美也美不过想像7

2016-03-06

源自：JS实现“旋转木马”幻灯片效果 2-11

关注问题我要回答

1515

操作

收起

5 回答

陈mou 回答被采纳 +3 积分
2016-03-24

因为旋转的时候第一张图片会先设置上最后一张的zindex值，然后循环的时候第二张会获取第一张的zindex值，所以一直循环下去的话全部都会设成最后一张的zindex 而使用animation的话它是先绑定上去但是是有一段过渡期去渐变成那个值。拓展一下的话就是如果each函数每一步执行的时间过长（以至于长过了animation的过渡时间)那么animation也会和.css一样的效果

2 回复有任何疑惑可以回复我~

#1

补充：如果将zindex保存到一个数组上面去，用下一个each去循环输出的话就可以很快的将每个zindex设置上去，因为程序运行的时间远快于animation过渡时间，所以看上去就好像同步的进行了设置。其实扩大到无限倍看的话，他们还是不同步的

2016-03-24 回复有任何疑惑可以回复我~

一只帅蚂蚁
2016-05-10

@陈mou 你描述非常好！就是这个意思~~

0 回复有任何疑惑可以回复我~

Joeeeee
2016-12-11

也就是说each循环不会等到animation走完就会开始下一次循环，改变css设置的index值

0 回复有任何疑惑可以回复我~

蓝蜗牛7788
2016-08-28

each执行的快，先循环完毕把值都取到了，animate执行的慢再渐变成那个值，而css是循环时取到值就执行了，所以最终取到的值都是最后那个值，我理解的对吗

1 回复有任何疑惑可以回复我~

weibo_再美也美不过想像7 提问者
2016-03-06

又看了一遍视频，意思是设置在self.css("zIndex",zIndex)的话，它的zIndex值就是固定的最后一张的，是不会变得？可是上面的zIndex不是每次都在变吗？为什么放在css中就不变了呢？

0 回复有任何疑惑可以回复我~

举报

0/150

提交

取消

JS实现“旋转木马”幻灯片效果

参与学习 66442 人
解答问题 147 个

JS组件封装，制作一个图片幻灯片切换效果，一起学习吧

本课相似问答

4 回答zIndex没变

1 回答ZIndex的值直接通过animate动画过渡设置

3 回答JQuery-3.2.1中没有zIndex，用什么来代替？

3 回答为什么zIndex=Math.ceil(this.posterItems.size()/2);这里为什么不向下取整

1 回答关于carousel类内传递的参数

搜索更多本课相关问答

关于zIndex的问题

我要回答关注问题

意见反馈帮助中心 APP下载