使用纯CSS3代码实现简单的图片轮播
设计思路：
以5张图片为例：
1.基本布局：
通过设置每张图片的尺寸和父容器的尺寸，从而将5张图片横向并排放入一个div容器(#photos)内。所有图片设置统一尺寸，父容器div宽度设置5个图片的总尺寸，然后放入相框容器div(#photoPanel)，相框设置1个图片的大小并设置溢出隐藏，以保证当前仅能显示一张图片。
2.设置动画：
使用css3动画，通过对图片容器photos进行位移，从而达到在相框容器frame中显示不同图片的目的，每次偏移一张图片的宽度，即可显示下一张图片。
5张图片，需要切换4次，定义动画0%，20%，40%，80%，100%。
3.动画分解：
为了让图片切换后静置一段时间，可以将动画细分为：位移切换和静置两个阶段。
即20%~40%里面包含切换到第二张图片并且将第二张图片静置。
另外，根据需要可以对各个图片添加相应的序号和图片简介。
4.其他事件：
如果需要点击事件的话，配合js完成其他特效(如：点击序号显示相应的图片、上一张下一张等)
5.效果图：
补充：~ 选择器 ，作用是查找某一个指定元素的后面的所有兄弟结点。例如，
span~p{
background: green;
}
具体实施步骤：
1、html页面内容元素
1
2
3
4
5
- 图片1简介
- 图片2简介
- 图片3简介
- 图片4简介
- 图片5简介
2、初步设置图片、图片的容器div的样式。
执行效果图：
补充：css3可以使用calc()给元素的border、margin、pading、font-size和width等属性设置动态值。因为我们使用的表达式来得到的值。不过calc()最大的好处就是用在流体布局上，可以通过calc()计算得到元素的宽度。
calc()能给元素的做计算，可以给一个div元素，使用百分比、em、px和rem单位值计算出其宽度或者高度，比如说“width:calc(50% + 2em)”，这样一来就不用考虑元素DIV的宽度值到底是多少，而把这个烦人的任务交由浏览器去计算。
calc()语法
calc()语法非常简单，就像我们小时候学加 (+)、减(-)、乘(*)、除(/)一样，使用数学表达式来表示：
.elm {
width: calc(expression);
}
参考代码：
#photos img{
width: 550px;
height: 400px;
}
#photos{
width: calc(550px*5);
/*margin-top: -30px;*/
}
3、设置ul和li的样式与位置，使得每个简介正好显示在每个图片的上面。
执行效果图如下：
参考代码：
#info{padding: 0px;}
#info li{
display: inline-block;
width: 250px;
background-color: #666;
border-radius: 10px;
padding: 5px 0px;
text-align: center;
position: relative;
top:-410px;
margin:0px 150px;/*各个li之间一定不能有空格，否则位置输出不正确*/
opacity: 0.8;
color: orange;
font-we
673
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
