<!--HTML代码-->

<!DOCTYPE html>

<html lang="en">
<head>
　　<meta charset="UTF-8">
　　<title>轮播图</title>
　　<link rel="stylesheet" href="css/reset.css">
　　<link rel="stylesheet" href="css/style.css">
</head>
<body>
<!-- 轮播图在一轮动画结束之后有一个很突兀的跳到开始的第一个元素，出现一种很不协调的感觉，为了消除这种感觉,让效果看起来像是轮播,最简单的办法就是在最后一个元素后面添加第一个元素 -->
　　<div class="user">
　　　　<div class="user-inner container">
　　　　　　<div class="iphone">
　　　　　　　　<div class="iphone-inner">
　　　　　　　　　　<ul>
　　　　　　　　　　　　<li><img src="data:images/ui01.jpg" alt="pic"></li>
　　　　　　　　　　　　<li><img src="data:images/ui02.jpg" alt="pic"></li>
　　　　　　　　　　　　<li><img src="data:images/ui03.jpg" alt="pic"></li>
　　　　　　　　　　　　<li><img src="data:images/ui04.jpg" alt="pic"></li>
　　　　　　　　　　　　<li><img src="data:images/ui05.jpg" alt="pic"></li>
　　　　　　　　　　　　<li><img src="data:images/ui06.jpg" alt="pic"></li>

<!--在这里添加一个图片1，用于动画结束后跳转到animation执行前的时候不出现空档-->
　　　　　　　　　　　　<li><img src="data:images/ui01.jpg" alt="pic"></li>
　　　　　　　　　　</ul>
　　　　　　　　</div>
　　　　　　</div>
　　　　</div>
　　</div>
</body>
</html>

<!--接下来是css的代码-->

.user{
　　min-height: 808px;
}
.container{
　　width: 1000px;
　　margin:0 auto;
}
.user-inner{
　　min-width: 808px;
}
.iphone{
　　width: 193px;
　　height: 408px;
　　background: url(../images/ui-phone.png) no-repeat;
　　position:relative;
}
.iphone-inner{
　　width: 167px;
　　height: 295px;
　　background-color: red;
　　position: absolute;
　　top: 57px;
　　left: 14px;
　　overflow: hidden;
}
.iphone-inner:hover ul{
　　animation-play-state:paused;
}
.iphone-inner ul{
　　width: 1169px;
　　position: absolute;
　　top: 0;
　　left: 0;

<!--设置anmation属性-->
　　animation:imggo 10s linear infinite;
}
.iphone-inner ul li{
　　float: left;
}
.iphone-inner ul li img{
　　width: 167px;
　　height: 295px;
}

<!--设置关键帧，给图片轮播的过程和图片的暂停分别甚至时间-->
@keyframes imggo{
　　0%{
　　　　left:0;
　　}
　　10%{
　　　　left:0;
　　}
　　16.66%{
　　　　left:-167px;
　　}
　　26.66%{
　　　　left:-167px;
　　}
　　33.33%{
　　　　left:-334px;
　　}
　　43.33%{
　　　　left:-334px;
　　}
　　50%{
　　　　left:-501px;
　　}
　　60%{
　　　　left:-501px;
　　}
　　66.66%{
　　　　left:-668px;
　　}
　　76%{
　　　　left:-668px;
　　}
　　83.33%{
　　　　left:-835px;
　　}
　　93.33%{
　　　　left:-835px;
　　}
　　100%{
　　　　left:-1002px;
　　}
}

使用css制作轮播图的更多相关文章

  1. 基于css制作轮播图的部分效果

    在轮播图中,我们可以通过鼠标在特定位置上的滑动来实现元素背景的改变.通常在制作轮播图时,我们首先想到的是js中的交互.可是,如果我们无法使用js,只能单纯的靠css又该如何实现这一效果呢?下面,本人将 ...

  2. 用 CSS 做轮播图

    对于用 css 实现一个轮播图的缘由,是那时候刚开始接触前端,完全还不懂 js.但是有一个项目(就是一个用来应付面试的作品)需要做一个轮播的效果,当时第一反应就是用 css3 自定义动画 -webki ...

  3. 纯CSS实现轮播图效果，你不知道的CSS3黑科技

    前言 轮播图已经是一个很常见的东西,尤其是在各大App的首页顶部栏,经常会轮番显示不同的图片. 一提到轮播图如何实现时,很多人的第一反应就是使用Javascript的定时器,当然这种方法是可以实现的. ...

  4. 基于zepto使用swipe.js制作轮播图demo

    在移动web开发中,由于手机界面较小,为了能展示更多的图片经常使用轮播图并且还需要考虑到手机流量的问题,通过请教他人以及百度,个人感觉swipe.js比较好用 它是一个纯javascript工具,不需 ...

  5. 拓展-教你手把手用纯CSS写轮播图

    先看成品图[示例网址:][1] [1]: https://huruji.github.io/css-imitate-js/slider/index.html一.随便说几句####css3动画效果的强大 ...

  6. 使用css实现轮播图

    使用css3实现图片轮播 前言:实现图片轮播的方式有很多种 ,例如js ,css 等等. 本文主要讲述使用纯css3实现轮播图 工具介绍: 使用的编辑器: Hbuilder 进入正题 html代码: ...

  7. 纯css实现轮播图

    轮播图的实现原理其实是比较简单的 举个例子 <div class="main"> <div class="div-main"></ ...

  8. marquee标签制作轮播图

    http://qy-0824.blog.163.com/blog/static/725075422011214142226/ 缺点是仅能控制轮播的速度.鼠标悬停暂停等,并不能给其指定链接.触摸滑动.分 ...

  9. slider插件制作轮播图

    html代码: <div id="banner_tabs" class="flexslider"> <ul class="slide ...

随机推荐

  1. selenium环境配置和八大元素定位

    一.环境配置 1.selenium下载安装 安装一:pip install selenium(多数会超时安装失败) 安装二:pip install -i https://pypi.tuna.tsing ...

  2. AtCoder Beginner Contest 247 F - Cards // dp + 并查集

    原题链接:F - Cards (atcoder.jp) 题意: 给定N张牌,每张牌正反面各有一个数,所有牌的正面.反面分别构成大小为N的排列P,Q. 求有多少种摆放方式,使得N张牌朝上的数字构成一个1 ...

  3. mui switch(开关)里面token不能及时更新

    做登录的时候再本地用locaStorage存了一个token值,但是登录之后进入页面里面发现一个switch开关里面的token值会跟着开关的切换在上一个token和当前的这个token值之间切换,我 ...

  4. PerfView专题 (第一篇)：如何寻找热点函数

    一:背景 准备开个系列来聊一下 PerfView 这款工具,熟悉我的朋友都知道我喜欢用 WinDbg,这东西虽然很牛,但也不是万能的,也有一些场景他解决不了或者很难解决,这时候借助一些其他的工具来辅助 ...

  5. DolphinScheduler 1.2.0 源码解析之 MasterServer

    这一篇主要讲解的是dolphinscheduler 1.2.0 的master部分的源码,从主类MasterServer开始,从启动到运行,master主要做了以下三件事情 Zookeeper 节点初 ...

  6. ceph 004 纠删码池 修改参数 cephx认证

    复习ceph003 存储池为逻辑概念,存储池可以占用整个集群的所有空间 [root@ceph01 ~]# ceph osd pool create pool1 pool 'pool1' created ...

  7. 一文搞懂EMAS Serverless小程序开发｜电子书免费下载

    >> 快来免费下载|电子书<五天玩转 EMAS Serverless> << 点击免费下载 <五天玩转 EMAS Serverless> EMAS Se ...

  8. pnpm凭什么这么快

    前端包管理器层出不穷,pnpm算是一个后起之秀.它和npm有什么不同,为什么有了npm还要造一个pnpm? npm的问题 npm是最早的包管理器,安装nodejs自带npm,v3版本之前,npm安全依 ...

  9. 【JDBC】学习路径8-连接池

    为什么是连接池? 第一.受我们硬件资源的限制,我们的一些资源使用时有限制的比如我们的数据库 连接数和线程数.为了摆脱这些限制,我们就使用了池化技术来将这些资源限制在一定范围内. 第二.我们创建和销毁这 ...

  10. dotnet 设计规范 · 数组定义

    ✓ 建议在公开的 API 使用集合而不是数组.集合可以提供更多的信息. X 不建议设置数组类型的字段为只读.虽然用户不能修改字段,但是可以修改字段里面的元素.如果需要一个只读的集合,建议定义为只读集合 ...