HTML图片轮播
一、纯 CSS 实现图片轮播
引自原文作者:南张人
原文链接:https://blog.csdn.net/u011848617/article/details/80468463
理论基础
CSS3 animation 属性和 @keyframes 规则
主体思想
- 准备相同大小的多个图片
- 将要展示图片横排放在一个图片容器里面
- 在图片容器外再加一个展示容器,展示容器大小为图片大小
- 给图片容器添加自定义动画,在动画不同阶段设置递增的偏移值
注意事项
- 动画效果分为切换和停留两部分
- 自定义动画阶段与图片数量相关
- 动画各阶段偏移值与图片大小相关
- 本文中示例最后一个图片到第一个图片没有切换效果,一个思路是可以由最后一个图片再挨个切换到第一个图片
HTML
<div id="container">
<div id="photo">
<img src="1.png" />
<img src="2.png" />
<img src="3.png" />
</div>
</div>
解析:
这里创建了三个 img 元素,img 元素外面是图片容器,图片容器外面是展示容器。
CSS
#container {
width: 400px;
height: 300px;
overflow: hidden;
}
#photo {
width: 1200px;
animation: switch 5s ease-out infinite;
}
#photo > img {
float: left;
width: 400px;
height: 300px;
}
@keyframes switch {
0%, 25% {
margin-left: 0;
}
35%, 60% {
margin-left: -400px;
}
70%, 100% {
margin-left: -800px;
}
}
解析:
- 展示容器大小和图片大小一致
- 图片添加 float 效果,不用考虑麻烦的 margin 问题
- 由于示例只有三个图片,所以添加了三个动画阶段,每一阶段都是通过设置递增的 margin-left 值达到切换的效果
- 设置的动画阶段(如:35%60%)是动画停留部分,和上一阶段空余时间(如25%35%)即为动画切换部分,各部分时间长短需要自己把控
运行效果
Github 地址
https://github.com/nanzhangren/CSS_skills/blob/master/animation/slide_image/slide_image.html
大佬的公众号
占个坑位,下面JS等实现。
HTML图片轮播的更多相关文章
- 原生js+css3实现图片自动切换,图片轮播
运用CSS3transition及opacity属性 制作图片轮播动画 自己这两天根据用js来控制触发CSS3中transition属性,从而写出来的以CSS3动画为基础,js控制过程的图片轮播 运用 ...
- 纯javaScript、jQuery实现个性化图片轮播
纯javaScript实现个性化图片轮播 轮播原理说明<如上图所示>: 1. 画布部分(可视区域)属性说明:overflow:hidden使得超出画布部分隐藏或说不可见.position: ...
- jQuery个性化图片轮播效果
jQuery个性化图片轮播效果 购物产品展示:图片轮播器<效果如下所示> 思路说明: 每隔一段时间,实现图片的自动切换及选项卡选中效果,鼠标划入图片动画停止,划出或离开动画开始 两个区域: ...
- 原生JS实现"旋转木马"效果的图片轮播插件
一.写在最前面 最近都忙一些杂七杂八的事情,复习软考.研读经典...好像都好久没写过博客了... 我自己写过三个图片轮播,一个是简单的原生JS实现的,没有什么动画效果的,一个是结合JQuery实现的, ...
- 基于面向对象的图片轮播(js原生代码)
无论你想走多远,你都需要不断地走下去.前端最精华的便是原生的js,这也是我们前端工程师的技术分层的重要指标,也提现这你的代码能力,开发的水平.废话不多说,进入今天的主要分享————基于面向对象思想的图 ...
- jquery 图片轮播demo实现
转载注明出处!!! 转载注明出处!!! 转载注明出处!!! 图片轮播demo,弄清楚过程其实是一个很简单的东西,看网上都没有什么实质性的代码,就自己把过程捋了一遍实现了. 这次因为随手写的,所以没有做 ...
- PgwSlideshow-基于Jquery的图片轮播插件
0 PgwSlideshow简介 PgwSlideshow是一款基于Jquery的图片轮播插件,基本布局分为上下结构,上方为大图轮播区域,用户可自定义图片轮播切换的间隔时间,也可以通过单击左右方向按键 ...
- 一分钟搞定AlloyTouch图片轮播
一分钟搞定AlloyTouch图片轮播 轮播图也涉及到触摸和触摸反馈,同时,AlloyTouch可以把惯性运动打开或者关闭,并且设置min和max为运动区域,超出会自动回弹.除了一般的竖向滚动,A ...
- 12款经典的白富美型—jquery图片轮播插件—前端开发必备
图片轮播是网站中的常用功能,用于在有限的网页空间内展示一组产品图片或者照片,同时还有非常吸引人的动画效果.本文向大家推荐12款实用的 jQuery 图片轮播效果插件,帮助你在你的项目中加入一些效果精美 ...
- Jsoup开发网站客户端第二篇,图片轮播,ScrollView兼容ListView
最近一段日子忙的焦头烂额,代码重构,新项目编码,导致jsoup开发网站客户端也没时间继续下去,只能利用晚上时间去研究了.今天实现美食网首页图片轮播效果,网站效果图跟Android客户端实现如图: 从浏 ...
随机推荐
- matplotlib 高阶之Transformations Tutorial
目录 Data coordinates Axes coordinates Blended transformations 混合坐标系统 plotting in physical units 使用off ...
- 「MySql高级查询与编程」练习:企业员工管理
题目:企业员工管理 一.语言和环境 1.实现语言:SQL. 2.开发环境:MySQL,navicat for mysql. 二.题目(100分): 1.创建数据库及数据表: (1)创建数据库,名称为d ...
- 编写Java程序,以树形结构显示国家-直辖市/省/州信息
返回本章节 返回作业目录 需求说明: 以树形结构显示国家-直辖市/省/州信息 实现思路: 创建显示树形结构的类Tree,在该类中定义Map类型的全局实例属性countryMap,该Map集合用于存放所 ...
- 树形DP总结基础
概念 应用 例题 最大独立子集 没有上司的晚会 题目描述 分析 树的重心 题目描述 分析 树的直径 概念 题目描述 分析 概念 给定一棵有N个节点的树(通常是无根树,也就是有N-1条无向边),我们可以 ...
- MySQL存储过程入门基础
创建存储过程无参语法: delimiter // create procedure 函数名() begin 业务逻辑 end // call 函数名() 通过函数名调用存储过程 创建存储过程有参与法: ...
- Python_列表比较大小
比较原理 从第一个元素顺序开始比较,如果相等,则继续,返回第一个不相等元素得比较结果.如果所有元素比较均相等,则长的列表大,一样长则两列表相等. 示例 a = [5, 6, 3] b = [5, 4, ...
- Pytest_定制allure报告(12)
定制报告需要先导入allure模块,再使用以下装饰器方法: feature: 标注主要功能模块. story: 标注feature功能模块下的分支功能. description:在报告中显示用例描述. ...
- docker安装elasticsearch6.8.3-单机模式及可视化Kibana6.8.3
docker安装elasticsearch6.8.3-单机模式 拉取镜像 docker pull elasticsearch:6.8.3 创建容器 测试环境加上-e "discovery. ...
- CentOS7 常用命令汇总
原文链接:https://blog.csdn.net/weixin_42208959/article/details/107970958 目录常用命令1.进程相关命令1.1 查询进程和结束进程1.2 ...
- 通过了解Servlet和Http之间的关系,了解web中http通信使用
注:图片如果损坏,点击文章链接:https://www.toutiao.com/i6512336761551585796/ 1.<Servlet简单实现开发部署过程> 2.<Serv ...