热门标签 | 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社区 其它相关文章!


推荐阅读
  • 本文深入探讨了 hCalendar 微格式在事件与时间、地点相关活动标记中的应用。作为微格式系列文章的第四篇,前文已分别介绍了 rel 属性用于定义链接关系、XFN 微格式增强链接的人际关系描述以及 hCard 微格式对个人和组织信息的描述。本次将重点解析 hCalendar 如何通过结构化数据标记,提高事件信息的可读性和互操作性。 ... [详细]
  • 利用树莓派畅享落网电台音乐体验
    最近重新拾起了闲置已久的树莓派,这台小巧的开发板已经沉寂了半年多。上个月闲暇时间较多,我决定将其重新启用。恰逢落网电台进行了改版,回忆起之前在树莓派论坛上看到有人用它来播放豆瓣音乐,便萌生了同样的想法。通过一番调试,终于实现了在树莓派上流畅播放落网电台音乐的功能,带来了全新的音乐享受体验。 ... [详细]
  • Node.js 配置文件管理方法详解与最佳实践
    本文详细介绍了 Node.js 中配置文件管理的方法与最佳实践,涵盖常见的配置文件格式及其优缺点,并提供了多种实用技巧和示例代码,帮助开发者高效地管理和维护项目配置,具有较高的参考价值。 ... [详细]
  • 二叉树的直径是指树中任意两个叶节点之间最长路径上的节点数量。本文深入解析了计算二叉树直径的算法,并提出了一种优化方法,以提高计算效率和准确性。通过详细的案例分析和性能对比,展示了该优化算法在实际应用中的优势。 ... [详细]
  • MongoVUE基础操作指南:轻松上手数据库管理
    本文介绍了MongoVUE的基础操作,旨在帮助用户轻松掌握数据库管理技巧。MongoVUE是一款功能强大的MongoDB客户端工具,虽然需要注册,但其用户友好的界面和丰富的功能使其成为许多开发者的首选。文中详细解释了安装步骤、基本配置以及常见操作方法,并对一些常见的问题进行了修正和补充,确保用户能够快速上手并高效使用MongoVUE进行数据库管理。 ... [详细]
  • PHP开发人员薪资水平分析:工程师平均工资概况
    PHP开发人员薪资水平分析:工程师平均工资概况 ... [详细]
  • 【Linux进阶指南】第一阶段第三课:体验与部署Ubuntu系统
    在正式踏上Linux学习之旅之前,本课程将引导你深入体验和部署Ubuntu系统。通过详细的操作步骤和实践演练,你将掌握Ubuntu的基本安装、配置及常用命令,为后续的进阶学习打下坚实的基础。此外,课程还将介绍如何解决常见问题和优化系统性能,帮助你更加高效地使用Ubuntu。 ... [详细]
  • 在基于.NET框架的分层架构实践中,为了实现各层之间的松散耦合,本文详细探讨了依赖注入(DI)和控制反转(IoC)容器的设计与实现。通过合理的依赖管理和对象创建,确保了各层之间的单向调用关系,从而提高了系统的可维护性和扩展性。此外,文章还介绍了几种常见的IoC容器实现方式及其应用场景,为开发者提供了实用的参考。 ... [详细]
  • ASP11:深入解析与应用展望本文详细探讨了 ASP11 中的 `AppRelativeTemplateSourceDirectory` 属性,该属性用于获取或设置包含控件的 Page 或 UserControl 对象的应用程序相对虚拟目录。此外,文章还介绍了 1.0 版本中的 Binding 机制,分析了其在实际开发中的应用和优化方法,为开发者提供了全面的技术指导。 ... [详细]
  • 本文详细探讨了Java集合框架的使用方法及其性能特点。首先,通过关系图展示了集合接口之间的层次结构,如`Collection`接口作为对象集合的基础,其下分为`List`、`Set`和`Queue`等子接口。其中,`List`接口支持按插入顺序保存元素且允许重复,而`Set`接口则确保元素唯一性。此外,文章还深入分析了不同集合类在实际应用中的性能表现,为开发者选择合适的集合类型提供了参考依据。 ... [详细]
  • VC维在机器学习中的应用与解析
    VC维在机器学习中的应用与解析VC维是指在机器学习中,一个假设空间能够正确分类的最大样本数量。具体而言,如果一个假设空间能够将N个样本以所有可能的 \(2^N\) 种方式完全分开,则称该假设空间具有N的VC维。VC维是衡量模型复杂度的重要指标,对于理解模型的泛化能力和过拟合风险具有重要意义。本文详细探讨了VC维的定义、计算方法及其在机器学习中的应用,并通过实例分析展示了其在模型选择和评估中的关键作用。 ... [详细]
  • C++入门必备:首个博客知识点汇总
    本文总结了C++初学者需要掌握的关键知识点,特别强调了成员类型的区分。其中,protected成员与private成员在本类中的作用相同,但protected成员允许派生类的成员函数访问,而private成员则不允许。此外,文章还介绍了其他重要的C++基础概念,如类的构造函数、析构函数以及继承机制,为初学者提供了一个全面的学习指南。 ... [详细]
  • 在Python编程语言中,字符串被视为不可变的Unicode字符序列。本文将详细介绍四种用于获取字符串长度的方法,并提供相应的代码示例,帮助读者更好地理解和应用这些技术。 ... [详细]
  • 本周课程涵盖了高精度计算、前缀和及差分技术。在高精度计算部分,我们将探讨如何处理任意进制的数值运算,包括但不限于正数的加法、减法和乘法。通过调整基数,可以灵活应对不同进制的需求。前缀和与差分技术则主要用于高效解决数组和区间查询问题,提升算法性能。 ... [详细]
  • 如何在Spark数据排序过程中有效避免内存溢出(OOM)问题
    本文深入探讨了在使用Spark进行数据排序时如何有效预防内存溢出(OOM)问题。通过具体的代码示例,详细阐述了优化策略和技术手段,为读者在实际工作中遇到类似问题提供了宝贵的参考和指导。 ... [详细]
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社区 版权所有