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

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

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

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

html局部可复制,截取网页局部区域css样式的方法和系统的制作方法
截取网页局部区域css样式的方法和系统的制作方法 [技术领域] [0001]本发明涉及计算机网络技术领域,特别是涉及一种截取网页局部区域CSS样式的方法和系统. [背景技术] [0002]CSS(Ca ...
纯css自动全屏轮播图html代码,纯CSS3代码实现简单的图片轮播
以4张图片为例: 1.基本布局: 将4张图片左浮动横向并排放入一个div容器内,图片设置统一尺寸,div宽度设置4个图片的总尺寸,然后放入相框容器div, 相框设置1个图片的大小并设置溢出隐藏,以保证 ...
如何在html添加css样式表,网页中添加CSS样式表的四种方式
本文向大家描述一下网页中添加CSS样式表的四种方式,首先让我们来看一下CSS样式表文件的优势,主要体现在两个方面,请看下文详细介绍. CSS样式表文件的优势表现在两个方面: ***,简化了网页的格式代 ...
如何在html网页内引入css样式
在html网页内引入css样式 1.调用外部css文件: <link rel="stylesheet" href="a.css" type="t ...
网页中使用CSS样式表的五种方法
一.使用STYLE属性将STYLE属性直接加在个别的元件标签里,<元件(标签) STYLE="性质(属性)1: 设定值1; 性质(属性)2: 设定值2; ...} 例如: < ...
静态网页怎么搭建在服务器上,云服务器搭建静态网页教程
云服务器搭建静态网页教程内容精选换一换为系统添加静态路由,避免重启系统后路由丢失而影响到网络可用性.以CentOS 6.5操作系统为例.登录弹性云服务器.创建或修改静态路由配置文件.在/etc/ ...
弹窗悬浮一个新网页php代码,一个简单的图片悬浮窗，点击可关闭
一个简单的图片悬浮窗,点击可关闭作者: 2015.05.02 本文发布于1793天前分类: #btnClose{ cursor:pointer;font-family:Arial;backgrou ...
Electron中实现通过webview实现内嵌网页并嵌入css样式和js脚本等
场景用HTML和CSS和JS构建跨平台桌面应用程序的开源库Electron的介绍以及搭建HelloWorld: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/a ...
flex 单独一行_Flex网页布局一CSS弹性伸缩盒子语法教程
网页布局(layout)是 CSS 的一个重点应用. 布局的传统解决方案,基于盒状模型,依赖 display 属性 + position属性 + float属性.它对于那些特殊布局非常不方便,比如,垂 ...

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

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

最新文章

热门文章

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

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

最新文章

热门文章

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

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