想请教一下使用margin-top实现图片切换的原理 谢谢
来源：4-1 焦点轮播图效果
mephe
2015-06-10 14:21
pic.style.marginTop=-170*curIndex+'px'; 请教问一下这段的意义 谢谢
写回答
关注
2回答
-
- 慕运维2603834
- 2015-11-24 20:14:41
试了一下，这个原理是这样的：ul没有设置height，而li设置了height：170px，使得ul被子元素li撑高为5*170px，这样子就是一副长长的图片，由于祖先元素.wrap设置了overflow：hidden;这样就只能看到第一张图片。
这时候设置了wrap为relative，ul设置为absolute，那么ul就可以根据wrap进行margin-top向上移动-170*n*px进行涌移动了，这样图片不断地移动，图片就会不断轮到下一张。
-
- 慕运维2603834
- 2015-11-24 17:10:17
这里只是ul实现了绝对定位吧，怎么图片变成绝对定位了？
.wrap ul{position:absolute;}
.wrap ul li{height:170px;}
应该不是这个原理吧
Tab选项卡切换效果
本课程详细介绍网页页面中最流行常用的tab切换效果
65469 学习 · 533 问题
相似问题