网页制作使用CSS样式制作轮播教程,静态网页设计与开发 1.案例——CSS3制作图片轮播图 （4）使用纯CSS3代码实现简单的图片轮播——分步骤实现.docx...

使用纯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