| 遇到的问题 | 学习轮番图制作时根据相关帖子敲了一段代码，然而浏览器实现时却发现一个问题，img1从右往左消失，而img2却是从左往右出现，导致消失与出现重叠了，调试了很久都无法实现，最后无奈看了看师兄代码，发现跟我有一出不同。如下： |
| |
| <ul> |
| <li><img src="images/banner.png"></li> |
| <li><img src="images/banner.png"></li> |
| <li><img src="images/banner.png"></li> |
| </ul> |
| 一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一 |
| .banner-img { |
| width: 300%; |
| height: 100%; |
| position: relative; |
| margin-left: 0; |
| -webkit-animation: img1 12s ease-out infinite; |
| -o-animation: img1 12s ease-out infinite; |
| animation: img1 12s ease-out infinite; |
| } |
| |
| /*.banner-img-first { |
| -webkit-animation: img1 12s ease-out infinite; |
| -o-animation: img1 12s ease-out infinite; |
| animation: img1 12s ease-out infinite; |
| } |
| .banner-img-second { |
| -webkit-animation: img2 12s ease-out infinite; |
| -o-animation: img2 12s ease-out infinite; |
| animation: img2 12s ease-out infinite; |
| } |
| .banner-img-third { |
| -webkit-animation: img3 12s ease-out infinite; |
| -o-animation: img3 12s ease-out infinite; |
| animation: img3 12s ease-out infinite; |
| }*/ |
| 一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一 |
| 师兄的css有红色代码，没有蓝色，我有蓝色，没有红色。我尝试删除蓝色代码，增加红色代码，竟然就好了………不过我没理解其中原因，我的代码是模仿教学帖子的，有蓝色无红色。 |
| 补充1：我思考了一下，是不是可以理解为，3张img是float：left；只设置img1的animation以后，img1动则img2和3一起动，因为浮动。 |
| 补充2：我刚根据这个想法实验了以下 删除img2和img3的@keyframes设置，果然。依然实现了轮播。 |
| 补充3：疑问，代码怎么知道img1是哪个？ |
返回列表
评论