<!--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. 基于串口校时的数字钟设计（verilog实现）

    任务: 电路图设计: 设计: 模块1:1.先设计一个计数时钟,为了仿真方便,这里把1000ns当作1s. 创建一个计数器second_lim,当计数到1000/20时清零,即1s. 秒显示器secon ...

  2. springmvc源码笔记-HandlerMapping注入

    在springmvc中,如何根据url找到controller以及对应方法,依赖的是HandlerMapping接口的getHandler方法 在spring容器中默认注册的HandlerMappin ...

  3. HashSet集合存储数据的结构(哈希表)和Set集合存储㢝不重复的原理

    HashSet集合存储数据的结构(哈希表) Set集合存储㢝不重复的原理 前提:存储的元素必须重写hashCode方法和equals方法

  4. 从零开始Blazor Server(1)--项目搭建

    项目介绍 本次项目准备搭建一个使用Furion框架,Blazor的UI使用BootstrapBlazor.数据库ORM使用Freesql的后台管理系统. 目前的规划是实现简单的注册,登录.增加管理员跟 ...

  5. 【水】关于 __attribute__

    目录 1. weak 2. aligned 3. __packed__ 4. always_inline 1. weak 实现如果 Func1 被定义了,我就调用 Func1, 否则就调用 MyFun ...

  6. 15分钟搭建RocketMQ源码调试环境

    下载源码 下载源码,github页面选择(rocketmq-all-4.7.1)版本压缩包,https://github.com/apache/rocketmq/tags 导入IDEA 1. 使用ID ...

  7. 【定时功能】消息的定时发送-基于RocketMQ

    一.功能介绍 要实现一个消息的定时发送功能,也就是让消息可以在某一天某一个时间具体节点进行发送.而我们公司的业务场景是类似短信的业务,而且数量不小,用户会进行号码.消息内容.定时发送时间等信息的提交. ...

  8. Linux系列之比较命令

    前言 Linux中有两个比较命令,它们分别是comm和diff,在比较文本文件的版本时通常很有用.本文介绍它们的区别和简单用法. comm命令 该命令对两个文本文件进行比较,并显示每个文件独有的行和它 ...

  9. 项目操作案例丨西门子PLC通过网关连接ACS800变频器

    本案例控制对象为炉条机.以及蒸汽的控制以及现场数据参数的显示以及报警. PLC 选用西门子 CPU,通过 ET200 IO 模块控制现场设备并监控数据.变频器采用ABB ACS800变频器,将ABB ...

  10. Spring源码 02 项目搭建

    参考源 https://www.bilibili.com/video/BV1tR4y1F75R?spm_id_from=333.337.search-card.all.click https://ww ...