使用css实现轮播图
使用css3实现图片轮播
- 前言:实现图片轮播的方式有很多种 ,例如js ,css 等等。 本文主要讲述使用纯css3实现轮播图
工具介绍:
使用的编辑器: Hbuilder
- 进入正题
html代码:
<div id="slide_show">
<div id="photos">
<!--
作者:JavaBuild
时间:2018-10-21
描述:轮播图
-->
<img id="first_slide_photo" src="data:images/slideshow_1.png" />
<img src="data:images/banner.jpg"/>
<img src="data:images/midbanner.jpg"/>
</div>
</div>
解释: 定义两个div,第一个div用来确定展示的大小,第二个div用来实现图片的轮播。
css代码:
/* start slide show */
#slide_show {
/* 第一个div的尺寸 */
width: 1360px;
height: 600px;
/* overflow:hidden 表示超出这个div的展示内容将被隐藏 */
overflow: hidden;
}
#photos {
/* calc(1360px * 3) 代表 一共有三张图片 , 每张长度为1360px */
width: calc(1360px * 3);
height: 600px;
/* animation 属性 实现动画效果,switch 动画函数名称,下面会写这个函数,6s代表整个轮播时长, ease-out 方向 infinite 循环轮播 normal 正常结束不反向轮播*/
-webkit-animation: switch 6s ease-out infinite normal;
}
#photos > img {
float: left;/* 向左浮动 ,图片连接无缝隙 */
width: 1360px;
height: 600px;
}
/* 轮播函数 */
@-webkit-keyframes switch{
0%, 25% { /* 第1张图所用时长 */
margin-left: 0px; /* 第一张距离左侧的长度 */
}
30%, 60% {/* 第2张图所用时长 */
margin-left: -1360px; /* 第一张距离左侧的长度 */
}
70%, 100% {/* 第3张图所用时长 */
margin-left: -2720px; /* 第一张距离左侧的长度 */
}
}
/* end slideshow */
以上即可实现图片的轮播,简单易用。纯css!
使用css实现轮播图的更多相关文章
- 用 CSS 做轮播图
对于用 css 实现一个轮播图的缘由,是那时候刚开始接触前端,完全还不懂 js.但是有一个项目(就是一个用来应付面试的作品)需要做一个轮播的效果,当时第一反应就是用 css3 自定义动画 -webki ...
- 基于css制作轮播图的部分效果
在轮播图中,我们可以通过鼠标在特定位置上的滑动来实现元素背景的改变.通常在制作轮播图时,我们首先想到的是js中的交互.可是,如果我们无法使用js,只能单纯的靠css又该如何实现这一效果呢?下面,本人将 ...
- 纯CSS实现轮播图效果,你不知道的CSS3黑科技
前言 轮播图已经是一个很常见的东西,尤其是在各大App的首页顶部栏,经常会轮番显示不同的图片. 一提到轮播图如何实现时,很多人的第一反应就是使用Javascript的定时器,当然这种方法是可以实现的. ...
- 拓展-教你手把手用纯CSS写轮播图
先看成品图[示例网址:][1] [1]: https://huruji.github.io/css-imitate-js/slider/index.html一.随便说几句####css3动画效果的强大 ...
- 使用css制作轮播图
<!--HTML代码--> <!DOCTYPE html> <html lang="en"><head> <meta char ...
- 纯css实现轮播图
轮播图的实现原理其实是比较简单的 举个例子 <div class="main"> <div class="div-main"></ ...
- 用html +js+css 实现页面轮播图效果
html 页面 <html lang="en"> <head> <meta charset="UTF-8"> <met ...
- css3 - 纯css实现一个轮播图
这是我上一次的面试题.一晃两个月过去了. 从前都是拿原理骗人,把怎么实现的思路说出来. 我今天又被人问到了,才想起来真正码出来.码出来效果说明一切: 以上gif,只用到了5张图片,一个html+css ...
- CSS3,3D效果轮播图
---恢复内容开始--- 大家还记得我昨天的3D拖拽立方体吗??我昨天还说过css还可以做轮播图,所以咱们今天就写一下,css的轮播图吧! ....这个轮播图主要是用CSS3里的transform的旋 ...
随机推荐
- 安装cnpm设置npm淘宝镜像源
安装cnpm npm install -g cnpm 验证npm镜像源 npm config get registry 题外话:cnpm和npm区别? cnpm其实就是在npm的基础上将镜像源更换到国 ...
- SSM整合+WebUpload使用(spring+springmvc+mybatis+maven)
SSM框架整合以及webupload的集成与使用 在项目中最近用到了webupload.js,也方方面面遇到了不少问题,比如上传文件前对表单参数校验,当校验失败不予提交,及在文件上传成功后,选择同 ...
- 常用API【2】
常用API 1.Math类 1.1 Math类概述 Math包含执行基本数字运算的方法 没有构造方法,如何使用类中的成员呢? 看类的成员是否是静态的,如果是,可以通过类名直接调用 1.2Math类的常 ...
- 《SeleniumBasic 3.141.0.0 - 在VBA中操作浏览器》系列文章之一:SeleniumBasic的下载
Selenium是一种非常流行的浏览器和网页自动化技术,开发人员可以使用C#.Java.Python等语言来操作Chrome.Firefox等浏览器. VBA语言可以直接操作访问Microsoft I ...
- python之cookie与session
cookie概念 cookie不属于http协议范围,由于http协议无法保持状态,但实际情况,我们却又需要“保持状态”,因此cookie就是在这样一个场景下诞生. cookie的工作原理是:由服务器 ...
- WebSphere MQ常用命令及配置
WebSphere MQ常用命令及配置 (2012-06-23 23:09:16) 标签: mq命令 杂谈 分类: MQ [导读]WebSphere MQ常用命令及配置 一,队列管理命令 1,创建队列 ...
- linux 字符驱动框架(用户态的read,write,poll是怎么操作驱动的)
前言 这篇文章是通过对一个简单字符设备驱动的操作来解释,用户态的读写操作是怎么映射到具体设备的. 因为针对不同版本的linux内核,驱动的接口函数一直有变化,这贴出我测试的系统信息: root@ubu ...
- 图灵机器人api的使用方法含微信版本和网页版
访问图灵机器人官网http://www.tuling123.com/ 注册一个新的机器人账号 注册成功后转到主页 点击我的机器人>创建机器人>微信机器人 填写基本信息 点击微信介入> ...
- Vue搭建组件库并发布到 npm
https://www.jianshu.com/p/72d303449abc
- Spring学习(七)bean装配详解之 【通过注解装配 Bean】【自动装配的歧义解决】
自动装配 1.歧义性 我们知道用@Autowired可以对bean进行注入(按照type注入),但如果有两个相同类型的bean在IOC容器中注册了,要怎么去区分对哪一个Bean进行注入呢? 如下情况, ...