图片切换问题

在还没有做点击按钮图片出去的效果时，是否为以下情况：

一进入界面时，第一张图片z-index=10;没问题

当点击其他按钮时候（以按钮2为例），第二张图从left:-150进来，z-index=10;

问题一：那请问第一张图是在第二张图的下面吗？

问题二：接着再点击按钮1，

若第一张图是在第二张图的下面，第一张图是直接到最上层显示吗？此时仍会发生第一张图由左至右的移动动画，如何解释？

若第一张图不是在第二张图的下面，在点击其他按钮时是否同时回到left为-150px的位置呢？

问题比较多，感谢您。

海内存知己v 2017-02-10

源自：CSS3图片切换特效 3-11 animation实现当前图片飘出动画

28

收起

1回答

Python工程师 2017-02-10 19:02:24

我们后面学js，应该可以在元素绑定事件触发时，改变图片样式，控制其z-index值、大小及位置等。例如鼠标点击的哪张切换到中间，原本中间那张定位到一边，并缩小。现在也可以用CSS的:hover、：active伪类来控制样式，在点击下去时勉强体验下图片切换的效果。例如把左边图片在点击时移上来，.banner > ul > li.left:active { z-index: 9999; width: 960px; height: 460px; top: 37px; right: 0; left: 0; }

提问者海内存知己v #1

谢谢，但是我还是不理解我问问的问题

2017-02-10 19:24:21
Python工程师回复提问者海内存知己v #2

你可以理解为每切换一次图片，另外一张图片就向左移动150像素，然后溢出隐藏了

2017-02-12 15:07:26

相似问题

触发图片四种状态的自定义事件打印顺序跟老师的不同

图片加载问题

shadow图层的切图问题

这里应该怎么去追加第三张图片切换

请老师帮忙看看代码。

登录后可查看更多问答，登录/注册

HTML5与CSS3实现动态网页 2018

参与学习 1887 人
提交作业 4643 份
解答问题 5760 个

有HTML和CSS基础，却不知道如何进阶？本路径带你通过系统学习，完成从“会做网页”到“做出好的动态网页”的蜕变，迈出成为前端工程师的第一步。

本课精华内容

问答作业

请忽略此问答

26 33

公式书写。。

31 19

3-8编程练习哪有问题

47 17

全局变量与函数内的全局变量

119 15

编程练习4-4的问题

111 15

查看更多本课问答

请稍等 ...

意见反馈帮助中心 APP下载