html 一轮多图轮播,通过html+css3实现图片轮播切换
摘要:图片轮播切换是网站banner图常用的功能,很多网站的这个功能都是通过js来实现的,自从css3新增动画功能后,图片轮播切换不需要js也可以实现了。
图片轮播切换是网站banner图常用的功能,很多网站的这个功能都是通过js来实现的,自从css3新增动画功能后,图片轮播切换不需要js也可以实现了。
下面就让我们来看看如何只通过html+css3实现图片轮播切换效果。
html代码:html>
css轮播
- 1
- 2
- 3
图片轮播切换前的css样式:
*{padding: 0;margin: 0;}
body{
width: 100vw;
height: 100vh;
background: #82ccdd;
display: flex;
justify-content: center;
align-items: center;
}
div.scroll-photo{
position: absolute;
width: 400px;
height: 300px;
overflow: hidden;
}
div.photos{
position: absolute;
width: 1200px;
height: 300px;
z-index: -1;
}
div.photos img{
position: relative;
width: 400px;
height: 300px;
float: left;
}
div.index ul{
position: absolute;
display: grid;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
list-style: none;
width: 150px;
grid-template: 1fr/repeat(3,1fr);
justify-items: center;
}
div.index ul::after{
content: '';
position: absolute;
top: 0;
left: 12.5px;
width: 25px;
height: 25px;
border-radius: 50%;
z-index: -1;
background: #d63031;
}
div.index ul li{
position: relative;
width: 25px;
height: 25px;
border-radius: 50%;
color: #FFF;
background: rgba(0,0,0,.5);
display: grid;
justify-content: center;
align-items: center;
}
图片切换效果css:div.photos{
animation:scroll 6s steps(3,end);
animation-iteration-count: infinite;
}
div.index ul::after{
animation:index-scroll 6s steps(3,end);
animation-iteration-count: infinite;
}
@keyframes scroll{
to{
transform: translateX(-1200px);
}
}
@keyframes index-scroll{
to{
transform: translateX(150px);
}
}
只需把图片切换效果的css加到上面切换前的css后面即可。
这里用到的css3属性是animation,animation有个steps属性,它可以指定动画分几步来完成,这里的banner设置了3张图片,所以这里设置动画分3步完成。
transform: translateX(-1200px):3张图片,每张图片的宽度是400,图片轮播是从左到有显示图片,但显示图片的窗口是不动的,所以可以当成把图片往左拉,因此translateX里面的参数是负值。
index-scroll对应的是数字高亮图标的运动。与图片的运动一样,不过方向相反。
最终效果
html 一轮多图轮播,通过html+css3实现图片轮播切换相关推荐
- css33d图片轮播_通过html+css3实现图片轮播切换
摘要:图片轮播切换是网站banner图常用的功能,很多网站的这个功能都是通过js来实现的,自从css3新增动画功能后,图片轮播切换不需要js也可以实现了. 图片轮播切换是网站banner图常用的功能, ...
- jquery手写轮播图_15个超强的jQuery/HTML5图片轮播插件
最近我们为大家分享过不少基于jQuery的图片轮播插件,当然也有很多使用了HTML5和CSS3的相关技术,让整个图片播放器显得更加美观,动画效果显得更加炫酷.这次我们特意为大家筛选了一些最新的jQue ...
- 老网站 轮播图重构 ——HTML+JavaScript简单地实现图片轮播
老网站实现图片轮播时可能使用了flash相关的技术,但是由于安全原因,很多浏览器都已经不再支持flash动画渲染. 所以,我们需要 将基于flash实现的图片轮播部分重构 . 使用Vue.React技 ...
- HTML圆形立体感轮播图,jQuery超酷响应式圆形图片轮播图特效
mislider是一款效果非常酷的jQuery响应式圆形图片轮播图特效插件.该轮播图特效可以将图片以圆形图片显示,然后使图片无限循环形成轮播图或旋转木马特效.该轮播图插件的特点有: 使用简单 在同一个 ...
- php制作图片轮播_JavaScript_jQuery制作简洁的图片轮播效果,演示图:核心代码:$ - phpStudy...
jQuery制作简洁的图片轮播效果 演示图: 核心代码: $(document).ready(function(){ var $iBox = $('.imgBox'), $iNum = $('.img ...
- 网页制作使用CSS样式制作轮播教程,静态网页设计与开发 1.案例——CSS3制作图片轮播图 (4)使用纯CSS3代码实现简单的图片轮播——分步骤实现.docx...
使用纯CSS3代码实现简单的图片轮播 设计思路: 以5张图片为例: 1.基本布局: 通过设置每张图片的尺寸和父容器的尺寸,从而将5张图片横向并排放入一个div容器(#photos)内.所有图片设置统一 ...
- html轮播图jquery,原生js和jquery实现图片轮播特效
(1)首先是页面的结构部分 对于我这种左右切换式 1.首先是个外围部分(其实也就是最外边的整体wrapper) 2.接着就是你设置图片轮播的地方(也就是一个banner吧) 3.然后是一个图片组(可以 ...
- android github轮播图,Android使用开源框架ANDROID-IMAGE-INDICATOR实现图片轮播部署
之前的博文中有介绍关于图片轮播的实现方式,分别为(含超链接): 今天通过使用GitHub中的开源项目android-image-indicator来简单实现APP自带图片的轮播以及加载网络图片进行轮播 ...
- vue 实现无限轮播_使用Vue制作图片轮播组件思路详解
之前一直都没有认真的写过一个组件.以前在写业务代码的过程中,都是用的别人封装好的组件,这次尝试着写了一个图片轮播组件,虽然比不上知名的轮播组件,但它的功能基本完整,而且在写这个组件的过程中,学的东西也 ...
- html 旋转木马 轮播,JS实现旋转木马式图片轮播效果
本文实例为大家分享了js图片轮播的具体代码,供大家参考,具体内容如下 主要html代码: Document function $(id){ return document.getElementById ...
最新文章
- Keepalived Nginx 高可用性配置
- 零基础入门学习Python(2)
- 用Python实现简单的人脸识别,10分钟(附源码)
- vue-cli中的webpack配置
- Java基础学习总结(7)——Object类
- VTK:IO之ReadOBJ
- react native 生成APK
- SAP Hybris和ABAP Netweaver里的DAO(Data access object)
- 【算法设计与分析】07 算法的数学基础
- linux+apache+mysql+php
- Android源码和内核源码的下载,编译和执行
- mjorm java_MongoDB 的 ORM框架 MJORM
- tb文件 vivado_Vivado FPGA设计基础操作流程:Vivado的基本使用
- 拓端tecdat|R语言中使用非凸惩罚函数回归(SCAD、MCP)分析前列腺数据
- tomcat后台密码爆破脚本(python+字典)_Web中间件漏洞之Tomcat篇
- 基于slate构建文档编辑器
- 软件设计师真题知识点笔记❀
- Quartz 源码解析(一) —— 基本介绍
- dw怎么在框架中加入网页_DW中制作框架网页.ppt
- linux nfs性能差,linux – 奇怪的nfs性能:1个线程比8个好,8个好于2个!