使用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的旋 ...
随机推荐
- FastDFS+nginx整合模块安装
FastDFS安装 安装gcc编译器 yum -y install gcc automake autoconf libtool make 上传解压两个文件包 libfastcommon是从FastDF ...
- BasicInterpreter1.00 运行简单Basic脚本 打印变量及字符串
源码下载:https://files.cnblogs.com/files/heyang78/basicInterpreter-20200529-1.rar 脚本: count= print(count ...
- fabric1.4 网络操作
建立第一个网络 进入对应目录 $ cd fabric-samples/first-network 在first-network目录下有两个自动化脚本byfn.sh和eyfn.sh, 这两个脚本的启动顺 ...
- nginx高可用
15.1. 传统的高可用思路 tomcat的高可用的思路,是在tomcat集群前面加一层负载服务nginx.如下图 这种做法,解决了tomcat的高可用问题.但是引入了前面的负载机器的高可用问题(Ng ...
- Java查找指定文件中指定字符的个数
package lwl.youweb2.test; import java.io.BufferedReader; import java.io.FileReader; import java.io.I ...
- js拖拽原理及简单实现(渣渣自学)
第一步 首先简单分析下需求吧,我们就是想实现鼠标拖拽带颜色的方块时,让方块停留在鼠标松开的位置,需要计算的就是拖拽前的坐标和拖拽后的坐标,鼠标移动后相对于原位置的偏移量=目标元素的偏移量,根据这个等式 ...
- 嵌入式Linux软链接使用技巧
软链接概述 软链接是Linux下常用的一种共享文件方式.目录的方式,这种方式类似于Windows下的快捷方式.一般一个文件或者目录在不同的路径都需要的时候,可以通过创建软链接的方式来共享,这样只系统下 ...
- jmeter中接口测试出现乱码或不识别中文解决办法
在查看结果是中出现乱码时:jmeter的bin目录下的jmeter.properties下最下面添加sampleresult.default.encoding=UTF-8后重新打开工具就好了 在接口的 ...
- [LeetCode]287. 寻找重复数(二分)
题目 给定一个包含 n + 1 个整数的数组 nums,其数字都在 1 到 n 之间(包括 1 和 n),可知至少存在一个重复的整数.假设只有一个重复的整数,找出这个重复的数. 示例 1: 输入: [ ...
- [LeetCode]121、122、309 买股票的最佳时机系列问题(DP)
121.买卖股票的最佳时机 题目 给定一个数组,它的第 i 个元素是一支给定股票第 i 天的价格. 如果你最多只允许完成一笔交易(即买入和卖出一支股票),设计一个算法来计算你所能获取的最大利润. 注意 ...