静态网页设计与开发 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页面内容元素 body div id=photoPanel span class=nums id=num11/span span class=nums id=num22/span span class=nums id=num33/span span class=nums id=num44/span span class=nums id=num55/span div id=photos img src=./images/1.jpgimg src=./images/2.jpgimg src=./images/3.jpgimg src=./images/4.jpgimg src=./images/5.jpg ul id=info li图片1简介/lili图片2简介/lili图片3简介/lili图片4简介/lili图片5简介/li /ul /div /div /body 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); } 参考代码： style type=text/css #photos img{ width: 550px; height: 400px; } #photos{ width: calc(550px*5); /*margin-top: -30px;*/ } /style 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-weight: bold; } 4、设置最外层div 的样式和span标签的位置 （1）设置最外层div仅能够显示一张图片的宽度，溢出部分隐藏 （2）将span标签设置相对定位，将这些数字整体移动到相框的右下角。 （