CN110764921A - 轮播图展示方法、装置、电子设备及计算机可读介质 - Google Patents

Abstract

本公开提供一种轮播图展示方法、装置、电子设备及计算机可读介质，属于互联网技术领域。该方法包括：获取构成轮播图的背景图；检测所述背景图中是否添加动画元素，所述动画元素为图片或文字；如果所述背景图中检测到动画元素，则根据所述背景图和所述动画元素的属性信息进行优先级的排序，且所述背景图的优先级高于所述动画元素的优先级；根据所述优先级从高到低的顺序进行加载。本公开在背景图下添加动画元素，内容管理不仅仅只是增加或删除图片，可以在不修改前端开发工程师修改代码再上线的流程的前提下，即可达到随时自定义动画展示轮播图的目的。还通过将原来的全部下载改为按需下载，即优先下载需要优先显示的部分，达到快速展示的效果。

Description

轮播图展示方法、装置、电子设备及计算机可读介质

技术领域

本公开总体涉及互联网技术领域，具体而言，涉及一种轮播图展示方法、装置、电子设备及计算机可读介质。

背景技术

对于大部分企业互联网支撑服务平台，跟大部分的官方网站一样，轮播图是必不可少的元素。官网中的轮播图占据网页的一大部分位置，用于实时显示最新动态与活动。

通常，轮播图的切换是通过左右滑动来达到显示下一张图片的效果。其切换的左右滑动的动画是通过CSS(Cascading Style Sheets，层叠样式表)动画实现，即为轮播图的父标签添加了一个过渡的动画属性，在即将切换的时候设置其CSS中的left属性，则该父标签就会按照一定属性描画出轨迹进行运动，从而形成了切换动画。但是轮播图的切换方式只是固定的左右滑动切换，切换动画单一，会带来疲劳感，缺乏新鲜感。

因此，现有技术中的技术方案还存在有待改进之处。

在所述背景技术部分公开的上述信息仅用于加强对本公开的背景的理解，因此它可以包括不构成对本领域普通技术人员已知的现有技术的信息。

发明内容

本公开提供一种轮播图展示方法、装置、电子设备及计算机可读介质，解决上述技术问题。

本公开的其他特性和优点将通过下面的详细描述变得显然，或部分地通过本公开的实践而习得。

根据本公开的一方面，提供一种轮播图展示方法，包括：

获取构成轮播图的背景图；

检测所述背景图中是否添加动画元素，所述动画元素为图片或文字；

如果所述背景图中检测到动画元素，则根据所述背景图和所述动画元素的属性信息进行优先级的排序，且所述背景图的优先级高于所述动画元素的优先级；

根据所述优先级从高到低的顺序进行加载。

在本公开的一个实施例中，所述属性信息包括存储路径、大小、位置、动画路径、预设权重和轮播顺序中的至少一种。

在本公开的一个实施例中，根据所述背景图和所述动画元素的属性信息进行优先级的排序包括：

如果所述背景图中检测到多个动画元素，则获取所述多个动画元素的属性信息；

根据所述属性信息对所述多个动画元素的优先级进行排序，形成队列；

其中所述多个动画元素的优先级均低于所述背景图的优先级。

在本公开的一个实施例中，根据所述属性信息对所述多个动画元素的优先级进行排序，形成队列包括：

判断所述属性信息中是否含有预设权重；

如果所述属性信息中含有所述预设权重，则对所述多个动画元素按照所述预设权重的值从大到小的顺序排列，形成元素队列；

如果所述属性信息中不含有所述预设权重，则对所述多个动画元素按照所述大小的值从小到大的顺序排列，形成所述元素队列；

将所述背景图添加在所述元素队列之前，形成所述队列。

在本公开的一个实施例中，根据所述属性信息对所述多个动画元素的优先级进行排序，形成队列之前，还包括：

获取所述轮播图中的多个背景图；

按照所述多个背景图的轮播顺序形成分组，所述分组内包括一个所述背景图和所述背景图中的至少一个动画元素。

在本公开的一个实施例中，根据所述优先级从高到低的顺序进行加载包括：

对排序后的队列按顺序进行加载；

对所述队列内的所述背景图和所述动画元素按照所述优先级从高到低的顺序进行加载。

在本公开的一个实施例中，所述背景图中检测到动画元素之后，还包括：

对所述动画元素添加自定义动画路径。

根据本公开的再一方面，提供一种轮播图展示装置，包括：

背景获取模块，被配置为获取构成轮播图的背景图；

检测模块，被配置为检测所述背景图中是否添加动画元素，所述动画元素为图片或文字；

排序模块，被配置为如果所述背景图中检测到动画元素，则根据所述背景图和所述动画元素的属性信息进行优先级的排序，且所述背景图的优先级高于所述动画元素的优先级；

加载模块，被配置为根据所述优先级从高到低的顺序进行加载。

根据本公开的又一方面，提供一种电子设备，包括处理器；存储器，存储用于所述处理器控制如上所述的方法步骤的指令。

根据本公开的另一方面，提供一种计算机可读介质，其上存储有计算机可执行指令，所述可执行指令被处理器执行时实现如上所述的方法步骤。

根据本公开实施例提供的轮播图展示方法、装置、电子设备及计算机可读介质，一方面，在背景图下添加动画元素，内容管理不仅仅只是增加或删除图片，可以在不修改前端开发工程师修改代码再上线的流程的前提下，即可达到随时自定义动画展示轮播图的目的。另一方面，对背景图以及添加的动画元素的优先级进行排序处理，从而使得原来的全部下载改为按需下载，即优先下载需要优先显示的部分，达到快速展示的效果。

应当理解的是，以上的一般描述和后文的细节描述仅是示例性的，并不能限制本公开。

附图说明

通过参照附图详细描述其示例实施例，本公开的上述和其它目标、特征及优点将变得更加显而易见。

图1示出本公开一实施例中提供的一种轮播图展示方法的流程图。

图2示出本公开一实施例图1中步骤S130的流程图。

图3示出本公开一实施例图3中步骤S220的流程图。

图4示出本公开一实施例中前端对于轮播图展示的流程图。

图5示出本公开一实施例中前端转换装置的工作原理图。

图6示出本公开一实施例中控制台内容管理的流程图。

图7示出本公开另一实施例中提供的一种轮播图展示装置的示意图。

图8示出本公开一实施例提供的适于用来实现本申请实施例的电子设备的结构示意图。

具体实施方式

现在将参考附图更全面地描述示例实施方式。然而，示例实施方式能够以多种形式实施，且不应被理解为限于在此阐述的范例；相反，提供这些实施方式使得本公开将更加全面和完整，并将示例实施方式的构思全面地传达给本领域的技术人员。附图仅为本公开的示意性图解，并非一定是按比例绘制。图中相同的附图标记表示相同或类似的部分，因而将省略对它们的重复描述。

此外，所描述的特征、结构或特性可以以任何合适的方式结合在一个或更多实施方式中。在下面的描述中，提供许多具体细节从而给出对本公开的实施方式的充分理解。然而，本领域技术人员将意识到，可以实践本公开的技术方案而省略所述特定细节中的一个或更多，或者可以采用其它的方法、组元、装置、步骤等。在其它情况下，不详细示出或描述公知结构、方法、装置、实现、材料或者操作以避免喧宾夺主而使得本公开的各方面变得模糊。

附图中所示的一些方框图是功能实体，不一定必须与物理或逻辑上独立的实体相对应。可以采用软件形式来实现这些功能实体，或在一个或多个硬件模块或集成电路中实现这些功能实体，或在不同网络和/或处理器装置和/或微控制器装置中实现这些功能实体。

为使本发明的目的、技术方案和优点更加清楚明白，以下结合具体实施例，并参照附图，对本发明进一步详细说明。

在全文中，所涉及的术语解释如下：

轮播图：是同一套图片以一定时间间隔(如5秒钟)采用多个频道进行循环播放，用户可通过选择频道来达到前进后退的图片点播效果。

动画：是网页中元素的运动轨迹，如网页中元素的旋转、移动、缩放都属于网页动画的一种。

自定义动画：在控制台通过拖拽等方式对背景图中动画元素的运动轨迹进行自定义。

CSS：层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。

CSS3：是CSS技术的升级版本，主要包括盒子模型、列表模块、超链接方式、语言模块、背景和边框、文字特效、多栏布局等模块。

在本公开的相关实施例中，控制台中的内容管理中有对官网轮播图的管理机制。在内容管理中，管理员可添加或删除图片，还可调整轮播图中图片的轮播顺序，通过保存修改来达到官网轮播图的自动替换，即不需要WEB前端开发工程师手动修改代码上线来达到替换轮播图片效果的目的。

但是，目前的技术方案存在以下三个缺点：第一，官网上的轮播图的切换动画是固定的左右滑动的切换方式，这种动画比较普通，用户接触久了会有一种疲劳感，无新意；第二，控制台的内容管理只能单纯地修改、替换或删除图片，无法自定义轮播图的切换动画，只能修改图片的顺序；第三，轮播图的图片都是一次性全部加载，而不是按需加载，不管需要优先显示的还是不需要优先显示的图片都是全部加载，可能导致不需要优先显示的图片已下载，但是需要优先显示的图片却未下载完成，从而不能显示出需要显示的图片，影响轮播图的展示，用户体验欠佳。

基于上述问题，本公开提供以下一种新的轮播图展示方法、装置、电子设备及计算机可读介质。

图1示出本公开一实施例中提供的一种轮播图展示方法的流程图，包括以下步骤：

如图1所示，在步骤S110中，获取构成轮播图的背景图。

如图1所示，在步骤S120中，检测所述背景图中是否添加动画元素，所述动画元素为图片或文字。

如图1所示，在步骤S130中，如果所述背景图中检测到动画元素，则根据所述背景图和所述动画元素的属性信息进行优先级的排序，且所述背景图的优先级高于所述动画元素的优先级。

如图1所示，在步骤S140中，根据所述优先级从高到低的顺序进行加载。

本公开实施例提供的轮播图展示方法，一方面，在背景图下添加动画元素，内容管理不仅仅只是增加或删除图片，可以在不修改前端开发工程师修改代码再上线的流程的前提下，即可达到随时自定义动画展示轮播图的目的。另一方面，对背景图以及添加的动画元素的优先级进行排序处理，从而使得原来的全部下载改为按需下载，即优先下载需要优先显示的部分，达到快速展示的效果。

以下结合图1所示的流程图对本公开提供的轮播图展示方法进行详细介绍，具体如下：

在步骤S110中，获取构成轮播图的背景图。

在本公开的一个实施例中，轮播图中可以包括多个背景图，因此对于多个背景图还设置有轮播顺序，即背景图之间的切换顺序。

在步骤S120中，检测所述背景图中是否添加动画元素。

在本公开的一个实施例中，所述动画元素为图片或文字，背景图也就是大图，每一张轮播大图是必要的，本实施例中还可以在背景图上通过拖拽等方式上传一些小的图片或文字等作为动画元素，这些动画元素是在背景图之上的，因此图片或文字的尺寸均是小于背景图的。

在步骤S130中，如果所述背景图中检测到动画元素，则根据所述背景图和所述动画元素的属性信息进行优先级的排序，且所述背景图的优先级高于所述动画元素的优先级。

在本公开的一个实施例中，所述属性信息包括存储路径、大小、位置、动画路径、预设权重和轮播顺序中的至少一种。如，对于背景图而言，其属性信息可以包括存储路径、大小、位置和轮播顺序；而对于动画元素而言，其属性信息包括存储路径、大小、位置、动画路径和预设权重。其中的存储路径是指背景图或动画元素在文件中的存储路径，大小是指背景图或动画元素的数据量大小，位置是指显示在前端界面中的位置，动画路径是指通过定义CSS动画的代码来实现动画元素的自定义动画路径。预设权重是指按照需求设定的数值，即比较重要的动画元素的预设权重值较高，反之则较低。

在本公开的一个实施例中，所述背景图中检测到动画元素之后，还包括：对所述动画元素添加自定义动画路径，如果为动画元素添加了自定义动画路径，则后续步骤中按照自定义动画路径进行加载及显示。其中自定义动画路径通过CSS3编码来实现。

在本公开的一个实施例中，图2示出步骤S130中根据所述背景图和所述动画元素的属性信息进行优先级的排序的流程图，具体包括以下步骤：

如图2所示，在步骤S210中，如果所述背景图中检测到多个动画元素，则获取所述多个动画元素的属性信息。如果背景图中仅包括一个动画元素的话，则仅对其是否添加自定义动画路径进行判断即可，该动画元素的优先级必定是低于背景图的优先级的，因此单独的一个动画元素无需进行优先级的排序，可以省略图2所示的步骤流程。

如图2所示，在步骤S220中，根据所述属性信息对所述多个动画元素的优先级进行排序，形成队列。

在本公开的一个实施例中，由于轮播图中存在多个背景图，因此步骤S220根据所述属性信息对所述多个动画元素的优先级进行排序，形成队列之前，还包括：

获取所述轮播图中的多个背景图，并按照所述多个背景图的轮播顺序形成分组，所述分组内包括一个所述背景图和所述背景图中的至少一个动画元素。而且在同一个分组内，其中所述多个动画元素的优先级均低于所述背景图的优先级。

在本公开的一个实施例中，图3还示出步骤S220根据所述属性信息对所述多个动画元素的优先级进行排序，形成队列的流程图，具体包括以下步骤：

如图3所示，在步骤S310中，判断所述属性信息中是否含有预设权重。

如图3所示，在步骤S320中，如果所述属性信息中含有所述预设权重，则对所述多个动画元素按照所述预设权重的值从大到小的顺序排列，形成元素队列。

如上所述，其中预设权重数值的大小可以根据具体使用场景的需求进行设定。假设某个动画元素为Logo，在某个使用场景中，就要设置该动画元素的权重值为所有动画元素中数值最高的，以便可以优先加载和显示，其他情况类似，此处不再赘述

如图3所示，在步骤S330中，如果所述属性信息中不含有所述预设权重，则对所述多个动画元素按照所述大小的值从小到大的顺序排列，形成所述元素队列。

以动画元素为图片为例，图片越大，则所需加载时间越长，因此其优先级相对较低。如果动画元素是文字，原理类似，此处不再赘述。

如图3所示，在步骤S340中，将所述背景图添加在所述元素队列之前，形成所述队列。

也就是在同一分组内，背景图的优先级最高；其次，如果是一个动画元素，则形成的队列中第一个是背景图，第二个是该动画元素，如果是多个动画元素，则形成的队列中第一个也是背景图，第二个是优先级(根据预设权重或是大小确定)最大的动画元素，然后是优先级次之的……以此类推。

在本公开的一个实施例中，根据所述属性信息对所述多个动画元素的优先级进行排序，形成队列之后，还包括：

按照所述轮播顺序对所述分组对应的所述队列进行排序，即按照轮播顺序排列各个背景图所在的分组，例如：最终形成的整体队列是背景图1、背景图1中的动画元素1、背景图1中的动画元素2……背景图2、背景图2中的动画元素1……背景图3、背景图3中的动画元素1、背景图3中的动画元素2……其中轮播顺序为：背景图1、背景图2、背景图3，背景图1中的动画元素1的优先级高于背景图1中的动画元素2，背景图3中的动画元素1的优先级高于背景图3中的动画元素2。

在步骤S140中，根据所述优先级从高到低的顺序进行加载。

在本公开的一个实施例中，根据所述优先级从高到低的顺序进行加载包括：

首先，对排序后的队列按顺序进行加载；其次，对所述队列内的所述背景图和所述动画元素按照所述优先级从高到低的顺序进行加载。即按照上述最终形成的整体队列进行加载。

图4示出本实施例中前端对于轮播图展示的流程图，如图4所示，具体包括下述步骤：

在步骤S410中，获取轮播图元素，其中这里的元素既可以仅包括背景图，还可以包括背景图和动画元素。

在步骤S420中，判断是否在动画元素，如果是，则切换到步骤S430，如果否，则切换到步骤S450。

在步骤S430中，将全部元素加入到前端转换装置中，形成队列。

该步骤将背景图和动画元素全都加入到前端转换装置中，以实现动画元素优先级的排序。另外，还包括对动画元素是否附带自定义动画路径进行判断，如果有则按照自定义动画路径保存修改，以便后续前端网页根据保存的数据进行显示。

在步骤S440中，按照队列加载全部背景图和动画元素，跳转至步骤S460。

在步骤S450中，显示默认轮播图，即显示本地默认图片。

在步骤S460中，完成轮播图初始化。

图5示出前端转换装置的工作原理图，如图5所示，大致包括以下处理流程：

(1)将需显示的全部元素(即元素1、元素2、元素3……，包括背景图和哥哥动画元素)组数据传入该前端转换装置中，包括存储路径、大小、位置、动画路径、权重和轮播顺序等数据。

(2)优先通过元素的轮播顺序将全部元素分组，一个分组内的元素包括这一张背景图和各个动画元素，将背景图设置为该分组内优先级别最高；

(3)分组内其它的动画元素的优先级则是根据管理员在后台设置的预设权重进行排序，如果管理员未设置预设权重，则根据动画元素分人大小进行顺序排序，按从小到大顺序排在背景图后面。

(4)各分组按照步骤(3)的操作进行排序，最后整合起来一组有优先级别顺序的元素组，将其添如一个队列中；

(5)从该队列中依次取出最前面的元素进行加载及显示，然后将该元素从队列删除。对该元素中如图片)的加载进行监听，一旦图片加载完成，则继续从队列中取出后面的元素进行加载；

(6)直到队列元素为空，则所有元素加载完毕，轮播图初始化完成。

基于上述方法，本实施例中以图片作为动画元素为例，对控制台内容管理的流程进行介绍，如图6所示，包括以下步骤：

如图6所示，在步骤S601中，创建图层。在轮播图中有几个背景大图，对应的就需要创建几个图层，具体创建几个需要根据使用场景来决定。

如图6所示，在步骤S602中，为每个图层添加背景图。

如图6所示，在步骤S603中，调整图层顺序，即调整轮播顺序，也就是图片顺序。

如图6所示，在步骤S604中，检测是否在图层内添加动画元素，如果是，则转至步骤S605，如果否，则转至步骤S610。

如图6所示，在步骤S605中，添加动画元素，并调整位置。

如图6所示，在步骤S606中，检测是否自定义动画路径，如果是，则转至步骤S607，如果否，则转至步骤S610。

如图6所示，在步骤S607中，选中动画元素并添加自定义动画路径。

如图6所示，在步骤S608中，检测是否设置预设权重，如果是，则转至步骤S609，如果否，则转至步骤S610。

如图6所示，在步骤S609中，选中动画元素设置预设权重。

如图6所示，在步骤S610中，保存修改。通过保存上述修改到数据库中，后续官网前端可以通过获取保存在数据库中的数据呈现动画效果。因此，前端获取控制台的内容管理轮播图，如果数据库中有数据，则按照保存的数据进行加载和显示，否则只显示本地默认图片。

基于上述步骤，控制台管理员可自定义每张轮播图里元素的运动轨迹，即切换动作，保存之后在前端网页上显示出自定义的动画效果。将大图片作为背景图，在背景图上可以拖拽上传一些小图片(也可以是文字)，然后制定这些小图片的动画路径，并将这一些动画路径(即CSS3动画)一同保存到数据库中。在官网前端获取到各个元素的各种数据，包括图片路径、图片大小、位置、动画路径、权重和轮播顺序。然后将各种数据传入另一个前端转换装置中，最后显示出轮播图片。而前端转换装置接收元素的各种数据，根据权重等因素将各元素进行显示排序处理，从而让浏览器优先下载需优先显示的元素。

综上所述，本公开实施例提供的轮播图展示方法，一方面，在背景图下添加动画元素，内容管理不仅仅只是增加或删除图片，可以在不修改前端开发工程师修改代码再上线的流程的前提下，即可达到随时自定义动画展示轮播图的目的。另一方面，对背景图以及添加的动画元素的优先级进行排序处理，从而使得原来的全部下载改为按需下载，即优先下载需要优先显示的部分，达到快速展示的效果。

图7示出本公开另一实施例中提供的一种轮播图展示装置的示意图，如图7所示，该轮播图展示装置700中包括：背景获取模块710、检测模块720、排序模块730和加载模块740。

背景获取模块710被配置为获取构成轮播图的背景图；检测模块720被配置为检测所述背景图中是否添加动画元素，所述动画元素为图片或文字；排序模块730被配置为如果所述背景图中检测到动画元素，则根据所述背景图和所述动画元素的属性信息进行优先级的排序，且所述背景图的优先级高于所述动画元素的优先级；加载模块740被配置为根据所述优先级从高到低的顺序进行加载。

在本公开的一个实施例中，轮播图中可以包括多个背景图，因此对于多个背景图还设置有轮播顺序，即背景图之间的切换顺序。

在本公开的一个实施例中，检测模块720检测到动画元素为图片或文字，背景图也就是大图，每一张轮播大图是必要的，本实施例中还可以在背景图上通过拖拽等方式上传一些小的图片或文字等作为动画元素，这些动画元素是在背景图之上的，因此图片或文字的尺寸均是小于背景图的。

在本公开的一个实施例中，检测模块720中属性信息包括存储路径、大小、位置、动画路径、预设权重和轮播顺序中的至少一种。如，对于背景图而言，其属性信息可以包括存储路径、大小、位置和轮播顺序；而对于动画元素而言，其属性信息包括存储路径、大小、位置、动画路径和预设权重。其中的存储路径是指背景图或动画元素在文件中的存储路径，大小是指背景图或动画元素的数据量大小，位置是指显示在前端界面中的位置，动画路径是指通过定义CSS动画的代码来实现动画元素的自定义动画路径。预设权重是指按照需求设定的数值，即比较重要的动画元素的预设权重值较高，反之则较低。

在本公开的一个实施例中，所述背景图中检测到动画元素之后，还包括：对所述动画元素添加自定义动画路径，如果为动画元素添加了自定义动画路径，则后续步骤中按照自定义动画路径进行加载及显示。其中自定义动画路径通过CSS3编码来实现。

排序模块730根据所述背景图和所述动画元素的属性信息进行优先级的排序的流程图，如图2所示，具体包括以下步骤：

在步骤S210中，如果所述背景图中检测到多个动画元素，则获取所述多个动画元素的属性信息。如果背景图中仅包括一个动画元素的话，则仅对其是否添加自定义动画路径进行判断即可，该动画元素的优先级必定是低于背景图的优先级的，因此单独的一个动画元素无需进行优先级的排序，可以省略图2所示的步骤流程。

在步骤S220中，根据所述属性信息对所述多个动画元素的优先级进行排序，形成队列。该步骤之前还包括：

获取所述轮播图中的多个背景图，并按照所述多个背景图的轮播顺序形成分组，所述分组内包括一个所述背景图和所述背景图中的至少一个动画元素。而且在同一个分组内，其中所述多个动画元素的优先级均低于所述背景图的优先级。

步骤S220根据所述属性信息对所述多个动画元素的优先级进行排序，形成队列的流程图，如图3所示，具体包括以下步骤：

在步骤S310中，判断所述属性信息中是否含有预设权重。

在步骤S320中，如果所述属性信息中含有所述预设权重，则对所述多个动画元素按照所述预设权重的值从大到小的顺序排列，形成元素队列。

如上所述，其中预设权重数值的大小可以根据具体使用场景的需求进行设定。假设某个动画元素为Logo，在某个使用场景中，就要设置该动画元素的权重值为所有动画元素中数值最高的，以便可以优先加载和显示，其他情况类似，此处不再赘述

在步骤S330中，如果所述属性信息中不含有所述预设权重，则对所述多个动画元素按照所述大小的值从小到大的顺序排列，形成所述元素队列。

以动画元素为图片为例，图片越大，则所需加载时间越长，因此其优先级相对较低。如果动画元素是文字，原理类似，此处不再赘述。

在步骤S340中，将所述背景图添加在所述元素队列之前，形成所述队列。

也就是在同一分组内，背景图的优先级最高；其次，如果是一个动画元素，则形成的队列中第一个是背景图，第二个是该动画元素，如果是多个动画元素，则形成的队列中第一个也是背景图，第二个是优先级(根据预设权重或是大小确定)最大的动画元素，然后是优先级次之的……以此类推。

在本公开的一个实施例中，根据所述属性信息对所述多个动画元素的优先级进行排序，形成队列之后，还包括：

按照所述轮播顺序对所述分组对应的所述队列进行排序，即按照轮播顺序排列各个背景图所在的分组，例如：最终形成的整体队列是背景图1、背景图1中的动画元素1、背景图1中的动画元素2……背景图2、背景图2中的动画元素1……背景图3、背景图3中的动画元素1、背景图3中的动画元素2……其中轮播顺序为：背景图1、背景图2、背景图3，背景图1中的动画元素1的优先级高于背景图1中的动画元素2，背景图3中的动画元素1的优先级高于背景图3中的动画元素2。

综上所述，本公开实施例提供的轮播图展示装置，一方面，在背景图下添加动画元素，内容管理不仅仅只是增加或删除图片，可以在不修改前端开发工程师修改代码再上线的流程的前提下，即可达到随时自定义动画展示轮播图的目的。另一方面，对背景图以及添加的动画元素的优先级进行排序处理，从而使得原来的全部下载改为按需下载，即优先下载需要优先显示的部分，达到快速展示的效果。

另一方面，本公开还提供了一种电子设备，包括处理器和存储器，存储器存储用于上述处理器控制以下方法的操作指令：

获取构成轮播图的背景图；检测所述背景图中是否添加动画元素，所述动画元素为图片或文字；如果所述背景图中检测到动画元素，则根据所述背景图和所述动画元素的属性信息进行优先级的排序，且所述背景图的优先级高于所述动画元素的优先级；根据所述优先级从高到低的顺序进行加载。

在本公开的一个实施例中，加载模块740根据所述优先级从高到低的顺序进行加载包括：

首先，对排序后的队列按顺序进行加载；其次，对所述队列内的所述背景图和所述动画元素按照所述优先级从高到低的顺序进行加载。即按照上述最终形成的整体队列进行加载。

基于上述实施例，本实施例中前端对于轮播图展示的流程图，如图4所示，具体包括下述步骤：

在步骤S410中，获取轮播图元素，其中这里的元素既可以仅包括背景图，还可以包括背景图和动画元素。

在步骤S420中，判断是否在动画元素，如果是，则切换到步骤S430，如果否，则切换到步骤S450。

在步骤S430中，将全部元素加入到前端转换装置中，形成队列。

该步骤将背景图和动画元素全都加入到前端转换装置中，以实现动画元素优先级的排序。另外，还包括对动画元素是否附带自定义动画路径进行判断，如果有则按照自定义动画路径保存修改，以便后续前端网页根据保存的数据进行显示。

在步骤S440中，按照队列加载全部背景图和动画元素，跳转至步骤S460。

在步骤S450中，显示默认轮播图，即显示本地默认图片。

在步骤S460中，完成轮播图初始化。

图5示出前端转换装置的工作原理图，如图5所示，大致包括以下处理流程：

(6)将需显示的全部元素(即元素1、元素2、元素3……，包括背景图和哥哥动画元素)组数据传入该前端转换装置中，包括存储路径、大小、位置、动画路径、权重和轮播顺序等数据。

(7)优先通过元素的轮播顺序将全部元素分组，一个分组内的元素包括这一张背景图和各个动画元素，将背景图设置为该分组内优先级别最高；

(8)分组内其它的动画元素的优先级则是根据管理员在后台设置的预设权重进行排序，如果管理员未设置预设权重，则根据动画元素分人大小进行顺序排序，按从小到大顺序排在背景图后面。

(9)各分组按照步骤(3)的操作进行排序，最后整合起来一组有优先级别顺序的元素组，将其添如一个队列中；

(10)从该队列中依次取出最前面的元素进行加载及显示，然后将该元素从队列删除。对该元素中如图片)的加载进行监听，一旦图片加载完成，则继续从队列中取出后面的元素进行加载；

(6)直到队列元素为空，则所有元素加载完毕，轮播图初始化完成。

基于上述方法，本实施例中以图片作为动画元素为例，对控制台内容管理的流程进行介绍，如图6所示，包括以下步骤：

如图6所示，在步骤S601中，创建图层。在轮播图中有几个背景大图，对应的就需要创建几个图层，具体创建几个需要根据使用场景来决定。

如图6所示，在步骤S602中，为每个图层添加背景图。

如图6所示，在步骤S603中，调整图层顺序，即调整轮播顺序，也就是图片顺序。

如图6所示，在步骤S604中，检测是否在图层内添加动画元素，如果是，则转至步骤S605，如果否，则转至步骤S610。

如图6所示，在步骤S605中，添加动画元素，并调整位置。

如图6所示，在步骤S606中，检测是否自定义动画路径，如果是，则转至步骤S607，如果否，则转至步骤S610。

如图6所示，在步骤S607中，选中动画元素并添加自定义动画路径。

如图6所示，在步骤S608中，检测是否设置预设权重，如果是，则转至步骤S609，如果否，则转至步骤S610。

如图6所示，在步骤S609中，选中动画元素设置预设权重。

如图6所示，在步骤S610中，保存修改。通过保存上述修改到数据库中，后续官网前端可以通过获取保存在数据库中的数据呈现动画效果。因此，前端获取控制台的内容管理轮播图，如果数据库中有数据，则按照保存的数据进行加载和显示，否则只显示本地默认图片。

基于上述步骤，控制台管理员可自定义每张轮播图里元素的运动轨迹，即切换动作，保存之后在前端网页上显示出自定义的动画效果。将大图片作为背景图，在背景图上可以拖拽上传一些小图片(也可以是文字)，然后制定这些小图片的动画路径，并将这一些动画路径(即CSS3动画)一同保存到数据库中。在官网前端获取到各个元素的各种数据，包括图片路径、图片大小、位置、动画路径、权重和轮播顺序。然后将各种数据传入另一个前端转换装置中，最后显示出轮播图片。而前端转换装置接收元素的各种数据，根据权重等因素将各元素进行显示排序处理，从而让浏览器优先下载需优先显示的元素。

下面参考图8，其示出了适于用来实现本申请实施例的电子设备的计算机系统800的结构示意图。图8示出的电子设备仅仅是一个示例，不应对本申请实施例的功能和使用范围带来任何限制。

如图8所示，计算机系统800包括中央处理单元(CPU)801，其可以根据存储在只读存储器(ROM)802中的程序或者从存储部分807加载到随机访问存储器(RAM)803中的程序而执行各种适当的动作和处理。在RAM803中，还存储有系统800操作所需的各种程序和数据。CPU 801、ROM 802以及RAM 803通过总线804彼此相连。输入/输出(I/O)接口805也连接至总线804。

以下部件连接至I/O接口805：包括键盘、鼠标等的输入部分806；包括诸如阴极射线管(CRT)、液晶显示器(LCD)等以及扬声器等的输出部分807；包括硬盘等的存储部分808；以及包括诸如LAN卡、调制解调器等的网络接口卡的通信部分809。通信部分809经由诸如因特网的网络执行通信处理。驱动器810也根据需要连接至I/O接口805。可拆卸介质811，诸如磁盘、光盘、磁光盘、半导体存储器等等，根据需要安装在驱动器810上，以便于从其上读出的计算机程序根据需要被安装入存储部分808。

特别地，根据本公开的实施例，上文参考流程图描述的过程可以被实现为计算机软件程序。例如，本公开的实施例包括一种计算机程序产品，其包括承载在计算机可读介质上的计算机程序，该计算机程序包含用于执行流程图所示的方法的程序代码。在这样的实施例中，该计算机程序可以通过通信部分809从网络上被下载和安装，和/或从可拆卸介质811被安装。在该计算机程序被中央处理单元(CPU)801执行时，执行本申请的系统中限定的上述功能。

需要说明的是，本申请所示的计算机可读介质可以是计算机可读信号介质或者计算机可读介质或者是上述两者的任意组合。计算机可读介质例如可以是——但不限于——电、磁、光、电磁、红外线、或半导体的系统、装置或器件，或者任意以上的组合。计算机可读介质的更具体的例子可以包括但不限于：具有一个或多个导线的电连接、便携式计算机磁盘、硬盘、随机访问存储器(RAM)、只读存储器(ROM)、可擦式可编程只读存储器(EPROM或闪存)、光纤、便携式紧凑磁盘只读存储器(CD-ROM)、光存储器件、磁存储器件、或者上述的任意合适的组合。在本申请中，计算机可读介质可以是任何包含或存储程序的有形介质，该程序可以被指令执行系统、装置或者器件使用或者与其结合使用。而在本申请中，计算机可读的信号介质可以包括在基带中或者作为载波一部分传播的数据信号，其中承载了计算机可读的程序代码。这种传播的数据信号可以采用多种形式，包括但不限于电磁信号、光信号或上述的任意合适的组合。计算机可读的信号介质还可以是计算机可读介质以外的任何计算机可读介质，该计算机可读介质可以发送、传播或者传输用于由指令执行系统、装置或者器件使用或者与其结合使用的程序。计算机可读介质上包含的程序代码可以用任何适当的介质传输，包括但不限于：无线、电线、光缆、RF等等，或者上述的任意合适的组合。

附图中的流程图和框图，图示了按照本申请各种实施例的系统、方法和计算机程序产品的可能实现的体系架构、功能和操作。在这点上，流程图或框图中的每个方框可以代表一个模块、程序段、或代码的一部分，上述模块、程序段、或代码的一部分包含一个或多个用于实现规定的逻辑功能的可执行指令。也应当注意，在有些作为替换的实现中，方框中所标注的功能也可以以不同于附图中所标注的顺序发生。例如，两个接连地表示的方框实际上可以基本并行地执行，它们有时也可以按相反的顺序执行，这依所涉及的功能而定。也要注意的是，框图或流程图中的每个方框、以及框图或流程图中的方框的组合，可以用执行规定的功能或操作的专用的基于硬件的系统来实现，或者可以用专用硬件与计算机指令的组合来实现。

描述于本申请实施例中所涉及到的单元可以通过软件的方式实现，也可以通过硬件的方式来实现。所描述的单元也可以设置在处理器中，例如，可以描述为：一种处理器包括发送单元、获取单元、确定单元和第一处理单元。其中，这些单元的名称在某种情况下并不构成对该单元本身的限定，例如，发送单元还可以被描述为“向所连接的服务端发送图片获取请求的单元”。

另一方面，本公开还提供了一种计算机可读介质，该计算机可读介质可以是上述实施例中描述的设备中所包含的；也可以是单独存在，而未装配入该设备中。上述计算机可读介质承载有一个或者多个程序，当上述一个或者多个程序被一个该设备执行时，使得该设备包括以下方法步骤：

获取构成轮播图的背景图；检测所述背景图中是否添加动画元素，所述动画元素为图片或文字；如果所述背景图中检测到动画元素，则根据所述背景图和所述动画元素的属性信息进行优先级的排序，且所述背景图的优先级高于所述动画元素的优先级；根据所述优先级从高到低的顺序进行加载。

应清楚地理解，本公开描述了如何形成和使用特定示例，但本公开的原理不限于这些示例的任何细节。相反，基于本公开公开的内容的教导，这些原理能够应用于许多其它实施方式。

以上具体地示出和描述了本公开的示例性实施方式。应可理解的是，本公开不限于这里描述的详细结构、设置方式或实现方法；相反，本公开意图涵盖包含在所附权利要求的精神和范围内的各种修改和等效设置。

Claims (10)

1.一种轮播图展示方法，其特征在于，包括：

获取构成轮播图的背景图；

检测所述背景图中是否添加动画元素，所述动画元素为图片或文字；

如果所述背景图中检测到动画元素，则根据所述背景图和所述动画元素的属性信息进行优先级的排序，且所述背景图的优先级高于所述动画元素的优先级；

根据所述优先级从高到低的顺序进行加载。

2.根据权利要求1所述的轮播图展示方法，其特征在于，所述属性信息包括存储路径、大小、位置、动画路径、预设权重和轮播顺序中的至少一种。

3.根据权利要求2所述的轮播图展示方法，其特征在于，根据所述背景图和所述动画元素的属性信息进行优先级的排序包括：

如果所述背景图中检测到多个动画元素，则获取所述多个动画元素的属性信息；

根据所述属性信息对所述多个动画元素的优先级进行排序，形成队列；

其中所述多个动画元素的优先级均低于所述背景图的优先级。

4.根据权利要求3所述的轮播图展示方法，其特征在于，根据所述属性信息对所述多个动画元素的优先级进行排序，形成队列包括：

判断所述属性信息中是否含有预设权重；

如果所述属性信息中含有所述预设权重，则对所述多个动画元素按照所述预设权重的值从大到小的顺序排列，形成元素队列；

如果所述属性信息中不含有所述预设权重，则对所述多个动画元素按照所述大小的值从小到大的顺序排列，形成所述元素队列；

将所述背景图添加在所述元素队列之前，形成所述队列。

5.根据权利要求3所述的轮播图展示方法，其特征在于，根据所述属性信息对所述多个动画元素的优先级进行排序，形成队列之前，还包括：

获取所述轮播图中的多个背景图；

按照所述多个背景图的轮播顺序形成分组，所述分组内包括一个所述背景图和所述背景图中的至少一个动画元素。

6.根据权利要求5所述的轮播图展示方法，其特征在于，根据所述优先级从高到低的顺序进行加载包括：

对排序后的队列按顺序进行加载；

对所述队列内的所述背景图和所述动画元素按照所述优先级从高到低的顺序进行加载。

7.根据权利要求1所述的轮播图展示方法，其特征在于，所述背景图中检测到动画元素之后，还包括：

对所述动画元素添加自定义动画路径。

8.一种轮播图展示装置，其特征在于，包括：

背景获取模块，被配置为获取构成轮播图的背景图；

检测模块，被配置为检测所述背景图中是否添加动画元素，所述动画元素为图片或文字；

排序模块，被配置为如果所述背景图中检测到动画元素，则根据所述背景图和所述动画元素的属性信息进行优先级的排序，且所述背景图的优先级高于所述动画元素的优先级；

加载模块，被配置为根据所述优先级从高到低的顺序进行加载。

9.一种电子设备，其特征在于，包括：

处理器；

存储器，存储用于所述处理器控制如权利要求1-7任一项所述的方法步骤。

10.一种计算机可读介质，其上存储有计算机可执行指令，其特征在于，所述可执行指令被处理器执行时实现如权利要求1-7任一项所述的方法步骤。

Images