热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

如何用CSS写轮播图效果?

相信很多小伙伴做过的项目里面都有轮播图这么一个需求,有的小伙伴可能会自己造轮子,但是如果不使用JavaScript,能不能实现轮播图的效果呢?本篇文章就带着大家有纯CSS实现轮播图效果。

相信很多小伙伴做过的项目里面都有轮播图这么一个需求,有的小伙伴可能会自己造轮子,有的小伙伴可能会直接Google轮播图插件

但是如果不使用Javascript,能不能实现轮播图的效果呢?可能小伙伴们并没有考虑过这个问题,那么下面我们就一起来用css实现一个简易的轮播图

基本需求分析

由于css无法做到js一样的精准操控,所有某些效果是无法实现的,比如在轮播的同时支持用户左右滑动,所以使用css智能实现基本的效果。下面列出来的内容就是我们实现的:

1、在固定区域中,内部内容自行滑动切换形成播放的效果

2、当切换到最后一张内容时,会反向播放或者回到起点重播

3、每张内容会停留一段时间,让用户能够看清楚

4、内容可以点击/进行操作

dom结构搭建

首先要有一个容器作为轮播图的容器,同时由于要实现滑动切换,所以内部需要有一个装载所有待切换内容的子容器

如果子容器中的内容是左右切换的,则需要将内容左右排列开

下面以轮播图片为例,上代码

.loop-wrap 是主容器

.loop-images-container 是承载内部图片的子容器

.loop-image 是图片内容,如果需要显示其他内容,可以自定义

css实现静态效果

轮播图内每一页内容的宽高应该相同,且等于主容器.loop-wrap宽高

.loop-images-container的宽高必然有一个大于外部主容器,overflow属性应该设置为hidden。那为什么不设置为auto呢?我不告诉你,你可以自己试试看???

.loop-wrap {
    position: relative;
    width: 500px;
    height: 300px;
    margin: 100px auto;
    overflow: hidden;
}
.loop-images-container{
    position: absolute;
    left: 0; top: 0;
    width: 500%; /* 横向排列 5张图片 宽度应为主容器5倍 */
    height: 100%;
    font-size: 0;
}
.loop-image{
    width: 500px;
    height: 300px;
}

下面在浏览器中打开页面,就可以看到不带轮播效果的静态页面了,除了第一张图片,其他图片都不可见

css实现轮播效果

轮播效果说到底就是一个动画效果,而通过css3的新属性 animation 我们就可以自定义一个动画来达到轮播图效果。下面先来了解一下 animation 这个属性

/*
animation: name duration timing-function delay iteration-count direction
name: 动画名
duration: 动画持续时间 设置为0则不执行
timing-function:动画速度曲线
delay:动画延迟开始时间 设置为0则不延迟
iteration-count:动画循环次数 设置为infinite则无限次循环
direction:是否应该轮流反向播放动画 normal 否 alternate 是
*/

animationname 值是动画名,动画名可以通过 @keyframes 创建自定义动画规则

分析动画

要实现轮播,本质上是使内部承载内容的子容器 .loop-images-container 进行位移,从而使不同位置的内容一次展示在用户眼前

共有五张图片需要展示,如果轮播总耗时10s,那么每张图片应该有2s的时间(20%),而每张图片耗时的构成是切换耗时+展示耗时,如果切换耗时500ms(5%),展示耗时就应该是1500ms(15%)

于是这样改造css

.loop-images-container{
    position: absolute;
    left: 0; top: 0;
    width: 500%;
    height: 100%;
    font-size: 0;
    transform: translate(0,0); /* 初始位置位移 */
    animation: loop 10s linear infinite;
}
/* 创建loop动画规则 */
/* 
   轮播5张,总耗时10s,单张应为2s(20%)
   单张切换动画耗时500ms,停留1500ms
*/
@keyframes loop {
    0% {transform: translate(0,0);}
    15% {transform: translate(0,0);} /* 停留1500ms */
    20% {transform: translate(-20%,0);} /* 切换500ms 位移-20% */
    35% {transform: translate(-20%,0);}
    40% {transform: translate(-40%,0);}
    55% {transform: translate(-40%,0);}
    60% {transform: translate(-60%,0);}
    75% {transform: translate(-60%,0);}
    80% {transform: translate(-80%,0);}
    95% {transform: translate(-80%,0);}
    100% {transform: translate(0,0);} /* 复位到第一张图片 */
}

当当当当~~~纯css实现轮播图效果完成

想要直接看效果的小伙伴可以猛戳下面的链接

纯css实现轮播图效果

这是一个方向的轮播效果,想要实现往返方向的轮播效果,小伙伴们可以试试directionalternate,但是自定义动画规则的时间间隔也要重新计算了哦!

推荐教程:《CSS教程》

以上就是如何用CSS写轮播图效果?的详细内容,更多请关注 第一PHP社区 其它相关文章!


推荐阅读
  • Docker基础入门与环境配置指南
    本文介绍了Docker——一款用Go语言编写的开源应用程序容器引擎。通过Docker,用户能够将应用及其依赖打包进容器内,实现高效、轻量级的虚拟化。容器之间采用沙箱机制,确保彼此隔离且资源消耗低。 ... [详细]
  • HDU1085 捕获本·拉登!
    问题描述众所周知,本·拉登是一位臭名昭著的恐怖分子,他已失踪多年。但最近有报道称,他藏匿在中国杭州!虽然他躲在杭州的一个洞穴中不敢外出,但近年来他因无聊而沉迷于数学问题,并声称如果有人能解出他的题目,他就自首。 ... [详细]
  • 为何Compose与Swarm之后仍有Kubernetes的诞生?
    探讨在已有Compose和Swarm的情况下,Kubernetes是如何以其独特的设计理念和技术优势脱颖而出,成为容器编排领域的领航者。 ... [详细]
  • 理解浏览器历史记录(2)hashchange、pushState
    阅读目录1.hashchange2.pushState本文也是一篇基础文章。继上文之后,本打算去研究pushState,偶然在一些信息中发现了锚点变 ... [详细]
  • 使用Echarts for Weixin 小程序实现中国地图及区域点击事件
    本文介绍了如何使用Echarts for Weixin在微信小程序中构建中国地图,并实现区域点击事件。包括效果展示、条件准备和逻辑实现的具体步骤。 ... [详细]
  • 本文介绍了如何处理MySQL数据库中表 'xdb.auditlog' 被标记为已损坏的问题,并提供了解决方案。 ... [详细]
  • 本文介绍了多种Eclipse插件,包括XML Schema Infoset Model (XSD)、Graphical Editing Framework (GEF)、Eclipse Modeling Framework (EMF)等,涵盖了从Web开发到图形界面编辑的多个方面。 ... [详细]
  • 本文详细介绍了一种实现PopupWindow全屏显示且能有效隐藏虚拟按键的技术方案,适用于Android开发。此方法经过实际测试,表现良好,兼容性优秀。 ... [详细]
  • BeautifulSoup4 是一个功能强大的HTML和XML解析库,它能够帮助开发者轻松地从网页中提取信息。本文将介绍BeautifulSoup4的基本功能、安装方法、与其他解析工具的对比以及简单的使用示例。 ... [详细]
  • 本文介绍了如何使用Maven命令对Spring Boot项目中的子模块进行独立打包,包括依赖树的查看、项目的运行和打包等基本操作。 ... [详细]
  • 深入理解异步多线程编程模型
    现代计算机系统中的CPU通过并行处理提高效率,但所谓的并发处理实际上是一种基于轮询的模拟并行。本文探讨了现代处理器如何通过虚拟化技术实现更高的并发性能,以及在.NET框架中如何有效利用线程和异步编程模式。 ... [详细]
  • 本文探讨了 Boost 库中的 Program Options 组件,这是一个强大的工具,用于解析命令行参数和配置文件。文章介绍了如何正确设置和使用该组件,包括处理复杂选项和负数值的方法。 ... [详细]
  • 本文通过具体示例详细介绍了 Python 中的装饰器和装饰类的使用方法,包括带参数的装饰器和装饰类的应用场景。 ... [详细]
  • 解决 Pytest 运行时出现 FileNotFoundError 的方法
    在使用 Pytest 进行测试时,可能会遇到 FileNotFoundError 错误,提示无法找到指定的文件或目录。本文将探讨该错误的原因及解决方案。 ... [详细]
  • SpringBoot新手入门指南
    本文旨在为初次接触SpringBoot的开发者提供一份详细的入门指导,包括如何快速搭建并运行一个简单的SpringBoot应用。通过本文,读者将了解Maven项目的构建、必要的配置文件设置以及基本的应用开发流程。 ... [详细]
author-avatar
蔡志哲皇宇
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有