轮播图效果,不再局限于JS制作!

HTML5学堂(码匠):网页的轮播图一直都是个比较精美的制作,同时也是用户体验较佳的效果。在开发工程师进行制作的时候往往会选择使用JS来书写,由此不禁会问,难道真的只有使用JS才能制作轮播图吗?

本文主要内容

1. 效果展示

2. 主要涉及到的知识点

3. 基本实现思路

4. 案例实现

1. 效果展示

CSS3动画效果的强大不言而喻,自它出现一直是热度不减,毋庸置疑的是CSS3动画的出现在一定程度上降低了动画效果的实现难度。其精练的代码把我们从复杂的JS制作中解放出来,如下的轮播图效果即是纯CSS3制作的。

2. 主要涉及到的知识点

相比较来说,使用CSS3实现轮播图效果会比使用JS来的简单一些,只需要借助CSS3系列中的选择器、动画,再配合上相应的位置定位即可实现,下面来具体分析下需要用到的知识点。

2.1 定位position

position属性规定了元素的定位类型,即所有的元素都可以用position来进行定位。

position属性有五个取值,分别为:static、relative、absolute、fixed、inherit。其具体含义如下:

2.2 CSS3选择器

主要功能是用于选择标签,有如下几个常用的选择器。

选择器:nth-child(n):选择器匹配属于其父元素的第n个子元素,不论元素的类型。

选择器E:last-child:匹配其父元素下的最后一个子元素。

选择器E:first-child:匹配其父元素下的第一个子元素。

如下是选择器E:first-child的书写形式:

.page em:first-child {
    position: absolute;
    left: 10px;
    top: 21px;
    background-color: #f60;
    animation: runPage 15s linear 2s infinite;
}

如上代码主要表示的是,选择到类名为page的标签中第一个em元素,然后为其设置样式。

2.3 CSS3动画

借助CSS3的animation来实现图片的轮播变化效果,配合上关键帧keyframe,让不同的变化时期发生图片位置的变化。其主要使用方式如下:

animation: runing 15s linear 2s infinite;

上述代码中,属性的从左往右依次代表的是:动画的名称(由keyframe定义)、动画的时间、动画的速度曲线、动画的延迟时间、动画的播放次数(infinite表示无限循环)。

3. 基本实现思路

利用外层div仅仅是一张图片的大小,内层div包含若干张图片的方式,借助超出隐藏实现图片的排列,让视口div永远只有一张图片被展示;之后借助CSS3的动画,使用关键帧控制,变化图片的定位位置值,调整较佳的视觉效果,最终实现出纯CSS3制作的轮播图效果。

4. 案例实现

基本的HTML结构如下:

<!doctype html>
<html>
<head>
    <meta charset="utf-8" />
    <title>CSS3轮播图效果</title>
    <link rel="stylesheet" type="text/css" href="http://css.h5course.cn/reset.css" />
    <style type="text/css"></style>
</head>
<body>
<!-- 效果的视口区 -->
<div class="pic-focus">
    <!-- 图片内容区 -->
    <ul>
        <li><img src="http://img.h5course.cn/codepen/2016.12.28.1.png"></li>
        <li><img src="http://img.h5course.cn/codepen/2016.12.28.2.jpg"></li>
        <li><img src="http://img.h5course.cn/codepen/2016.12.28.1.png"></li>
        <li><img src="http://img.h5course.cn/codepen/2016.12.28.4.jpg"></li>
        <li><img src="http://img.h5course.cn/codepen/2016.12.28.5.jpg"></li>
    </ul>
    <!-- 底部进度提示 -->
    <div class="page">
        <em></em>
        <em></em>
        <em></em>
        <em></em>
        <em></em>
        <em></em>
    </div>
</div>
</body>
</html>

相应的样式书写如下:

/*设置视口的大小样式*/
.pic-focus {
    position: relative;
    overflow: hidden;
    width: 480px;
    height: 320px;
    margin: 100px auto 0;
    border: 1px solid red;
}
/*设置内容区的样式*/
.pic-focus ul { 
    position: relative;
    width: 2400px;
    animation: runing 15s linear 2s infinite;
}
.pic-focus ul li {
    overflow: hidden;
    float: left;
    width: 480px;
    height: 320px;
}
.pic-focus ul li img {
    float: left;
    display: block;
    width: 100%;
    height: 100%;
}
.pic-focus .page {
    position: absolute;
    bottom: 0;
    left: 50%;
    margin-left: -135px;
    padding: 10px;
}
.pic-focus .page em {
    display: inline-block;
    width: 30px;
    height: 6px;
    margin: 0 10px;
    background-color: #ccc;
    border-radius: 3px;
}
/*对提示的进度单独设置样式*/
.pic-focus .page em:first-child {
    position: absolute;
    left: 10px;
    top: 21px;
    background-color: #f60;
    animation: runPage 15s linear 2s infinite;
}
/*图片轮播效果的关键帧控制*/
@keyframes runing {
    0%{left:0;}
    5%{left:-480px;}
    20%{left:-480px;}
    25%{left:-960px;}
    40%{left:-960px;}
    45%{left:-1440px;}
    60%{left:-1440px;}
    65%{left:-1920px;}
    80%{left:-1920px;}
    85%{left:0;}
    100%{left:0;}
}
/*随着图片切换,底部进度变化的关键帧控制*/
@keyframes runPage {
    0%{left:10px;}
    5%{left:65px;}
    20%{left:65px;}
    25%{left:119px;}
    40%{left:119px;}
    45%{left:174px;}
    60%{left:174px;}
    65%{left:229px;}
    80%{left:229px;}
    85%{left:10px;}
    100%{left:10px;}
}

总结

此轮播图效果是使用定位的方式,结合CSS3的选择器、动画来进行实现的。让开发者能够不必考虑逻辑性复杂的JS代码,为效果层面的开发减少了难度。

最后,这种CSS3实现的轮播图,缺点也是不言而喻的。因为点击轮换和自动轮换两者只能选其一,只不过自动轮换可以大量的使用在移动端开发,算是一个不错的选择。

原文发布于微信公众号 - HTML5学堂(h5course-com)

原文发表时间:2016-12-29

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏前端杂货铺

边框的巧妙应用

边框有一些特殊的属性,可以采用边框来实现对话框的效果,而且兼容性杠杠的,不过在ie6下面可能会遇到兼容性问题,在后面分析它。 首先,我们看看边框的组成结构: ...

40980
来自专栏HTML5学堂

随心所欲的滚动条,远离产品汪(二)

还记得上周咱们说的“随心所欲滚动条,远离产品汪”一文吗?当中介绍了自定义滚动条的基本原理与实现方法,在自定义滚动条实现后,可以通过对滚动条的上下拖动来控制内容区...

42080
来自专栏用户画像

H5新增的块级的语义元素

figure元素表示一段独立的流内容,一般表示文档主体流内容的一个独立单元。使用<figcaption>元素为figure元素组添加标题。

6420
来自专栏别先生

HTML+CSS小实战案例

HTML+CSS小实战案例 登录界面的美化,综合最近所学进行练习 网页设计先布局,搭建好大框架,然后进行填充,完成页面布局 1 <html> 2 <head...

79890
来自专栏数据小魔方

打破常规的图表制作新思维!!!

上一篇给大家讲了一个专业、规范、完善的商务图表的元素应该如何布局! 可能很多小伙伴儿会有疑问,默认的输出图表样式跟最终我们想要达到的效果相差十万八千里。想要在...

37070
来自专栏十月梦想

移动端适配之百分比适配

前面简单了了解了一下移动端,包括移动端的设备独立像素,物理像素,渲染像素以及像素比(DPR)等相关知识!接下来简单介绍一个比较简单的移动端适配方案!

16730
来自专栏前端小叙

绝对定位多个字居中显示的css

在工作中遇到一种情况,例如把一个div元素绝对定位到一个位置,但是该元素中的文字个数不确定,还要保证始终该文字是居中显示,则可以定义两个div,外层div绝对定...

28590
来自专栏从零开始学 Web 前端

从零开始学 Web 之 CSS3(四)边框图片,过渡

并且,添加边框图片是以背景的方式添加的,所以会有可能文字覆盖在边框的情况,后面也会介绍处理方法。

6510
来自专栏前端说吧

css布局 - 垂直居中布局的一百种实现方式(更新中...)

1. line-height行高简单粗暴实现法:line-height:Npx(N = 与元素高度相同的值)

51910
来自专栏九彩拼盘的叨叨叨

学习纲要:常见标签和属性

9620

扫码关注云+社区

领取腾讯云代金券