CN113434794A - 一种元素轮播方法、装置、设备及介质 - Google Patents

Abstract

本申请适用于计算机技术领域，提供了一种元素轮播方法、装置、设备及计算机可读介质，其中，一种元素轮播方法，响应于对页面文件进行加载的指令，渲染页面中的N个轮播空间，确定将在每个所述轮播空间中进行轮播的轮播元素集合，根据所述轮播元素集合在所述轮播空间中的轮播轨迹，确定所述轮播元素在所述轮播轨迹中的多个索引位置，在索引位置中确定激活展示位，然后基于每个索引位置的顺序，在所述轮播空间中对所述轮播元素进行轮播操作。本申请实施例提供的元素轮播方法，以确定好的索引位置的数据来对轮播视图的轮转进行驱动，不需要频繁地操作DOM，减少了浏览器页面重绘重排，使元素轮播过程更加流畅，提高了用户观感体验。

Description

一种元素轮播方法、装置、设备及介质

技术领域

本发明涉及计算机技术领域，特别涉及一种元素轮播方法、装置、设备及介质。

背景技术

轮播组件是业务系统中非常重要的展示交互组件，它罗列了网页中最需要引起关注的信息，通过仿真切换、自动轮播、绚丽的用户界面(User Interface，UI)等方式引导用户进行操作，以达到宣传、引流等的目的，是网页中最有效的信息传递方式之一。

现有的轮播组件在进行轮播时，多是通过操作文档对象模型(Document ObjectModel，DOM)结构或是改变DOM元素的位置来改变轮播内容的位置，达到切换的效果。在切换的过程中为了实现3D的效果，现有的轮播组件多是通过改变DOM元素的宽高值，利用人类肉眼对近大远小的感知来模拟一个3D的效果，但是在这样频繁地操作DOM结构、改变DOM元素的位置及大小，会大量的引起浏览器的页面的重绘重排，从而造成系统资源的大量消耗，还会引发元素的模糊或位置偏移，给用户带来不佳的体验。

发明内容

有鉴于此，本申请实施例提供了一种元素轮播方法、装置、设备及介质，以解决现有技术在进行元素轮播时用户体检不佳的问题。

本申请实施例一方面提供一种元素轮播方法，包括：

响应于对页面文件进行加载的指令，渲染页面中的N个轮播空间；其中，所述页面文件为服务器根据页面请求返回的文件；N为大于0的整数；

确定将在每个所述轮播空间中进行轮播的轮播元素集合；其中，所述轮播元素集合包括至少两个轮播元素；

根据所述轮播元素集合在所述轮播空间中的轮播轨迹，确定所述轮播元素在所述轮播轨迹中的多个索引位置；

基于每个索引位置的顺序，在所述轮播空间中对所述轮播元素进行轮播操作。

本申请实施例第二方面提供了一种元素轮播装置，包括：

轮播空间渲染模块，用于响应于对页面文件进行加载的指令，渲染页面中的N个轮播空间；其中，所述页面文件为服务器根据页面请求返回的文件；N为大于0的整数；

轮播元素确定模块，用于确定将在每个所述轮播空间中进行轮播的轮播元素集合；其中，所述轮播元素集合包括至少两个轮播元素；

索引位置确定模块，用于根据所述轮播元素集合在所述轮播空间中的轮播轨迹，确定所述轮播元素在所述轮播轨迹中的多个索引位置；

轮播执行模块，基于每个索引位置的顺序，在所述轮播空间中对所述轮播元素进行轮播操作。

本申请实施例第三方面提供了一种计算机设备，包括存储器、处理器以及存储在所述存储器中并可在所述处理器上运行的计算机程序，所述处理器执行所述计算机程序时实现第一方案提供的元素轮播方法。

本申请实施例第四方面提供了一种计算机可读存储介质，所述计算机可读存储介质存储有计算机程序，所述计算机程序被处理器执行时实现第一方案提供的所述的元素轮播方法。

实施本申请实施例提供的一种元素轮播方法、装置、设备及计算机可读存储介质具有以下有益效果：

本申请实施例提供的元素轮播方法，首先响应于对页面文件进行加载的指令，渲染页面中的N个轮播空间，确定将在每个所述轮播空间中进行轮播的轮播元素集合，根据所述轮播元素集合在所述轮播空间中的轮播轨迹，确定所述轮播元素在所述轮播轨迹中的多个索引位置，然后基于每个索引位置的顺序，在所述轮播空间中对所述轮播元素进行轮播操作。本申请实施例提供的元素轮播方法，以确定好的索引位置的数据来对轮播视图的轮转进行驱动，不需要频繁地操作DOM，减少了浏览器页面重绘重排，使元素轮播过程更加流畅，提高了用户观感体验。

附图说明

为了更清楚地说明本申请实施例中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本申请的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动性的前提下，还可以根据这些附图获得其他的附图。

图1本申请实施例提供的一种元素轮播方法的实现流程图；

图2本申请一实施例对轮播空间进行配置的示意图；

图3本申请一实施例在轮播轨迹中确定索引位置的示意图；

图4本申请实施例中一种元素轮播方法的步骤S4包含的子步骤的流程图；

图5本申请一实施例中某一时刻轮播元素和其对应的索引位置的示意图；

图6本申请一实施例中提供的一种元素轮播装置的模块构成图；

图7本申请一实施例中计算机设备的一示意图。

具体实施方式

下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。

在个人计算机(PersonalComputer，PC)或者移动终端上的全球广域网(Web)应用中，很多场景需要使用到轮播组件，例如，在某些视频网站的首页上，会有一个特定区域来向用户推荐用户可能喜欢的视频资源，比如某一用户经常浏览的赛事的最近一场比赛，或者用户最近在追的某一热播电视剧的最新一集，有时还会为用户推送一些周边的广告等，因此需要展示的内容可能不止一个，并且为了引起用户足够的注意，通常是以较大尺寸的海报图片来进行展示，从而起到重点推荐的作用。但由于用于展示的特定页面区域是有限的，在这样的情况下，就需要轮播的方式来对多个需要展示的内容以一定的时间间隔轮流进行展示。

现有的轮播组件在进行轮播时，多是通过操作DOM结构或是改变DOM元素的位置来改变轮播内容的位置，达到切换的效果。当需要在轮播过程中实现3D的切换效果时，现有的轮播组件多是通过改变DOM元素的宽高值，利用人类肉眼对近大远小的感知来模拟一个3D的效果，但是在这样频繁地操作DOM结构、改变DOM元素的位置及大小，会大量的引起浏览器的页面的重绘重排，从而造成系统资源的大量消耗，甚至有些情况下还可能会引发元素的模糊或位置偏移，给用户带来不佳的体验，同时这种基于手动操作而非基于数据驱动的自动更新，也会使代码变得繁冗复杂。

本实施例提供的元素轮播方法，可应用在可嵌入Web浏览器或者APP浏览器中的轮播组件中。

请参阅图1，图1示出了本申请实施例提供的一种元素轮播方法的实现流程图。

如图1所示，一种元素轮播方法，包括如下步骤：

S1、响应于对页面文件进行加载的指令，渲染页面中的N个轮播空间；其中，所述页面文件为服务器根据页面请求返回的文件；N为大于0的整数。

Web浏览器或者APP浏览器从服务器请求到页面文件后，会通过一步步解析页面文件中的代码，对页面的代码中包含的页面元素和页面元素的样式加载到浏览器相应的引擎中并最终渲染在浏览器的界面中。

在本实施例中，当得到对页面文件进行加载的指令时，本实施例中的方法需要首先从页面的代码中解析得到用于对元素进行轮播的轮播空间的一系列空间元素和属性值，并根据这些空间元素和属性值对轮播空间进行渲染。

其中，轮播空间的空间元素和属性值是由设计人员根据具体的展示需要配置到页面的代码中的。轮播空间可以是平面的空间也可以是立体的空间，当轮播空间被配置为平面的空间时，所述轮播空间在界面中只具有水平方向和竖直方向两个维度。当需要在立体的空间中进行轮播时，需要在平面空间的基础上再增加一个维度，来达到立体空间的效果。

请参阅图2，图2示出了本申请实施例对轮播空间进行配置的示意图。

如图2所示，本实施例中通过设置层叠样式表3级(Cascading StyleSheetsLevel3，CSS3)的一些属性，来完成立体轮播空间的设置，其中使用了transform的3d空间的perspective属性，通过给空间元素设置一个CSS3的属性perspective：500px，使空间元素元素包含z轴，将空间元素元素空间从平面转变成为一个立体的空间。其中500px是一个示例值，该值表示的是人眼在z轴上距离轮播元素原始平面的距离为500个像素，可以根据具体效果的需要对该值进行任意设置。要特别提到的是，使用transform的3d空间属性时，会调起浏览器的图形处理器(Graphics Processing Unit，GPU)进行渲染，这样就会降低中央处理器(Central Processing Unit，CPU)的压力，从而对页面渲染性能带来一定的提升。

可以理解的是，为了使页面的展示形式更加丰富多彩，一个页面中可以包括一个或者多个轮播空间，不同的轮播空间位于页面布局中的不同的位置区域，设计人员可以根据具体的轮播需要来增加或者减少轮播空间的个数。

S2、确定将在每个所述轮播空间中进行轮播的轮播元素集合；其中，所述轮播元素集合包括至少两个轮播元素。

在本实施例中，在得到了轮播空间之后，下一步需要确定在所述轮播空间中进行轮播的轮播元素集合。轮播元素是指需要被轮转播放的一系列的DOM元素，其中，元素的内容可以是文字、图片、视频或者包含链接的标签等，并且这些轮播元素通常是以子元素集合的形式被包裹在父元素盒子中，父元素盒子即为前述步骤中用于配置轮播空间的空间元素，每一个轮播空间内的轮播元素所组成的集合即为轮播元素集合。

可以理解的是，每一个轮播空间即为一个独立的用于对轮播元素进行轮播的空间，每个轮播元素集合中的轮播元素只在其对应的轮播空间中轮播，而为了形成“轮播”的视觉效果，每一个轮播元素集合中至少应包含两个轮播元素。

S3、根据所述轮播元素集合在所述轮播空间中的轮播轨迹，确定所述轮播元素在所述轮播轨迹中的多个索引位置。

在完轮播元素的轮播空间的渲染及确定了每个轮播空间对应的轮播元素集合后，还需要确定每个轮播元素集合中的轮播元素在其对应的轮播空间中的轮播轨迹。在确定轮播元素在轮播空间中的轮播轨迹时，为了使轮播元素的运动更平滑、精准，更接近设计师定义的轮播轨迹，本实施例使用CSS3中的一个实验属性offset-path来确定轮播元素的轮播轨迹，而不再采用常用的left、right等元素的位置属性，也不用transform的位移属性来设置元素的移动路线。offset-path属性的属性值为一条贝塞尔曲线，可以使设计人员更直观地来设计轮播轨迹，并且还可以通过改变元素的offset-distance：10％中的百分比来确定元素在x轴上的偏移程度，同时改变元素在z轴上的坐标值来精确确定元素的轮播轨迹上的位置。

作为本申请一实施例，步骤S3根据所述轮播元素集合在所述轮播空间中的轮播轨迹，确定所述轮播元素在所述轮播轨迹中的多个索引位置包括：

根据所述轮播元素的个数，在所述轮播轨迹中设置和所述轮播元素的个数相同的索引位置。

在本实施例中，在确定了轮播元素在轮播空间中的轮播轨迹之后，还需要确定所述轮播元素在所述轮播轨迹中的索引位置以供轮播元素暂时停留。其中，索引位置被设置为可以将轮播元素的内容索引至该位置上，并在该位置上进行渲染展示。

可以理解的是，因为轮播元素在轮播轨迹中移动的过程需要使用户直观的感觉到一共有多少个元素在被轮播展示，因此为了使轮播元素都能够在轮播视图中有所体现，索引位置的个数应当和轮播元素的个数相同。

请参阅图3，图3示出了本申请一实施例在轮播轨迹中确定索引位置的示意图。

如图3所示，图3中的横轴对应于轮播空间中的x轴，纵轴对应于轮播空间中的z轴，本实施例中轮播轨迹在轮播空间中的y轴坐标保持不变。假设共有7个轮播元素，从图3中还可以看出，在轮播轨迹上从左至右依次设有0-6共7个索引位置，7个索引位置的分布以位置3为中心位置，位置3的左右两边各等间距地分布3个索引位置，为了使轮播元素的分布美观，在本实施例中将索引位置呈左右对称的分布排列。当然，上述索引位置的设置方式仅为示例，在具体的应用过程中也可以采用非对称以及非均匀分布的方式来布置索引位置，只需要改变offset-path属性在x轴的百分比和在y轴以及z轴的距离即可实现，具体的设置方式可以根据具体需要进行灵活选择。

进一步的，为了使轮播元素在轮播过程中产生线性连贯的动画效果，本实施例在确定轮播轨迹时，还需要在轮播元素上设置CSS3属性transition：all.3s，其中设置的0.3s仅为示例，该时间表示轮播动画过渡的时间，0.3s为人的肉眼感知的最舒服的速度，具体的过渡时间可以根据具体需要进行设定，该属性的设置可以使得轮播元素在轮播轨迹中进行轮转时产生补间动画的效果。

S4、基于每个索引位置的顺序，在所述轮播空间中对所述轮播元素进行轮播操作。

在本实施例中，在确定完索引位置后，接下来就需要将各轮播元素沿着轮播轨迹，按照索引位置在轮播轨迹上的排列顺序在已经确定好的索引位置上进行轮播。其中，每个索引位置在轮播轨迹上的排列顺序在索引位置确定的同时也随之确定。需要说明的是，各索引位置在本质上没有区别，对索引位置进行排序的目的主要是为后续对轮播元素进行轮播时提供一个位置的参考。

请参阅图4，图4示出了本申请实施例中一种元素轮播方法的步骤S4包含的子步骤的流程图。

作为本申请一实施例，步骤S4基于每个索引位置的顺序，在所述轮播空间中对所述轮播元素进行轮播操作包括：

S41、在所述多个索引位置中确定激活展示位。

在本实施例中，由于页面中用于展示轮播元素的区域是有限的，当轮播元素的数量较多时，只能对多个轮播元素中的部分轮播元素的内容进行展示，因此需要在多个索引位置中确定激活展示位来对部分轮播元素的内容进行展示。在本实施例中激活展示位是用来展示被激活的轮播元素的专用索引位置，当某一轮播元素满足一定的条件(例如发生点击事件)时即被激活，轮播元素被激活以后会被轮转到激活展示位来进行元素内容的展示。

可以理解的是，激活展示位的展示层级位于最高的层级，当位于其他索引位置的轮播元素和位于激活展示位轮播元素在视图中相互重叠时，重叠区域只展示位于激活展示位的轮播元素的内容，确保被激活的轮播元素能够在激活展示位被完整的展示出来。其中，展示层级可以对应于本实施例轮播空间中的z轴，当z轴坐标越大，说明该位置距离人眼的距离越近，因此其展示层级也就越高。进一步还可以根据层级的高低来设置轮播元素被渲染时的透明度或者模糊程度，层级越低透明度越高或者模糊程度越高，层级越高透明度越低或者模糊程度越低，给用户带来更好的视觉体验。

在确定激活展示位时，可以将位于最左端或者最右端的位置作为激活展示位，也可以将位于最前端或者最后端的位置作为激活展示位，也可以选取位于中间的位置作为激活展示位，激活展示位置可以是一个也可以是多个，本实施例对此不做限定。

在确定了激活展示位后，还需要从多个轮播元素中确定在激活展示位上进行展示的激活元素。

S42、获取元素激活指令，根据所述元素激活指令激活对应的轮播元素得到激活元素。

在本实施例中，以只有一个激活展示位为例，激活指令是指将某一轮播元素确定为在激活展示位进行展示的轮播元素的指令，该被确定为在激活展示位进行展示的轮播元素即为激活元素。

作为本申请一实施例，步骤S42中的所述元素激活指令包括默认激活指令和激活事件。

在本实施例中，为了实现轮播组件自行地对轮播元素进行轮播展示，设置了可以在轮播元素间不断流转的默认激活指令。

所述默认激活指令按照预定的时间间隔，按照所述轮播元素的排列顺序，在所述轮播元素间依次流转，当默认激活指令流转到某一轮播元素时，该轮播元素被激活，成为激活元素。

可以理解的是，该默认激活指令类似于一个可以移动开关，按照轮播元素的排列顺序依次在轮播元素间移动，以此方法来不断激活每一个轮播元素，使每一个轮播元素都能够获得在激活展示位进行展示的机会。其中，预定的时间间隔可以根据具体需要来设置，以能够使用户对被展示的激活元素的内容进行完整浏览的时间间隔为宜。

和默认激活指令相对应的，某一轮播元素还可以通过激活事件成为轮播元素。所述激活事件发生时，所述激活事件对应的轮播元素立刻被激活成为激活元素。其中激活事件可以是基于用户的点击行为产生的事件，即当用户点击某一轮播元素时产生的事件，也可以是基于用户的拖拽操作产生的事件，即当用户拖拽某一轮播元素时产生的事件，本实施例对此不做限定。

作为本申请一实施例，所述激活事件的激活优先级高于所述默认激活指令的激活优先级；

当轮播元素被所述激活事件激活成为激活元素时，所述默认激活指令从所述激活元素开始流转。

在本实施例中，由于默认激活指令是一直存在并且是在轮播元素间不断流转的，而激活事件的发生具有一定的不确定性，因此当激活事件发生时，被所述激活事件激活的轮播元素可能和激活事件发生时默认激活指令所激活的轮播元素不是同一个轮播元素，而激活事件往往是基于用户的有意操作产生的，在此情况下为了能够对用户的操作及时做出响应，在本实施例中将激活事件的激活优先级设置为高于默认激活指令的激活优先级，这样就能够保证不论当前默认激活指令激活的是哪一个轮播元素，一旦出现激活事件，首先激活被所述激活事件激活的轮播元素。

进一步的，为了保证轮播视图的连续性，本实施例中还将默认激活指令设置为从被激活事件激活的轮播元素处开始流转，从而产生一种默认激活指令被激活事件所吸收的效果。

在前述步骤中确定了激活展示位以及产生了激活元素之后，接下来就需要将激活元素轮转至激活展示位进行展示。

S43、根据所述激活元素所在的索引位置的顺序和所述激活展示位所对应的索引位置的顺序，将所述激活元素轮转至所述激活展示位。

在本实施例中，当索引位置确定以后，索引位置在轮播轨迹中的排列顺序就固定了，而轮播元素在元素序列中的排列顺序也是固定的，轮播过程中不断变化的是轮播元素和索引位置的相对位置，也即轮播元素在索引位置上不断轮转。因此本实施例中以激活展示位所对应的索引位置的顺序为参考，根据激活元素被激活时所在的索引位置的顺序将激活元素轮转至激活展示位，从而实现对视图的驱动。

可以理解的是，轮播元素的内容可以是多种形式的数据，如果被激活的轮播元素是图片的，在激活展示位展示所述被激活元素包含的图片；如果被激活的轮播元素是视频的，在激活展示位播放所述被激活元素包含的视频内容；如果被激活的轮播元素关联有链接，在激活展示位展示所述被激活元素的链接的海报图片并激活该链接。

作为本申请一实施例，所述根据所述激活元素所在的索引位置的顺序和所述激活展示位所对应的索引位置的顺序，将所述激活元素轮转至所述激活展示位包括：

根据所述激活元素所在的索引位置的顺序和所述激活展示位所对应的索引位置的顺序，计算所述激活元素所在的索引位置和所述激活展示位的距离，根据所述距离确定轮转任务，根据所述轮转任务将所述激活元素轮转至所述激活展示位。

当某一轮播元素被激活后，在轮播视图中应当被轮转至激活展示位进行展示，本实施例中采取的方法是，首先获取激活元素对应的索引位置的顺序，如果根据激活元素的对应的索引位置的顺序判断出该激活元素没有位于激活展示位时，则需要对激活元素进行轮转，将激活元素轮转至激活展示位，这样便形成了以激活元素的索引位置数据和激活展示位的索引位置数据为驱动的动画视图，只需在渲染轮播元素时加入数据驱动的接口即可。

请参阅图5，图5示出了本申请一实施例中某一时刻轮播元素和其对应的索引位置的示意图。

如图5所示，顺序0-6对应于前述例子中的7个索引位置，其中第3个索引位置被确定为激活展示位，P1-P7为本示例中的轮播元素集合，该轮播元素集合共包含7个轮播元素，当前位于激活展示位的轮播元素是P2，假设默认激活指令是按照从P1至P7的流转顺序在P1和P7间循环流转的，默认激活指令会在经过一个预定的时间间隔后从P2流转至P3，如果此时用户点击了P5，则响应于点击事件，P5成为激活元素，而此时P5的索引位置的顺序为6不是激活展示位，通过比对P5的索引位置的顺序和激活展示位的顺序，得到如果将P5轮转至顺序为3的激活展示位处，需要将P5按照索引位置的顺序向前轮转3个索引位置(在视图中为向左轮转3个索引位置)，将上述轮转操作作为基于本次点击事件的轮转任务来对激活元素进行轮转，而与此同时默认激活指令被点击事件从P2吸收至第P5，并且从P5处开始按照原来的流转规则在轮播元素中继续流转。当然，轮转任务还可以是使P5按照索引位置的倒序来进行轮转，将P5按照索引位置的顺序向后轮转4个索引位置(在视图中为先向右循环轮转至最左侧的索引位置，然后再向右轮转3个索引位置轮转至激活展示位)轮转至激活展示位。

作为本申请一实施例，所述轮转任务还包括：根据所述轮播元素的排列顺序确定非激活轮播元素的轮转子任务，根据所述轮转子任务将所述非激活轮播元素轮转至对应的索引位置。

在本实施例中，由于轮播元素的排列顺序是不变的，因此激活元素的索引位置由于轮转发生变化的时候，其他所有的非激活元素的轮播元素的索引位置也需要跟着进行轮转才能够保证轮播元素的排列顺序不变，因此在轮转任务中还包含有对非激活轮播元素进行轮转的轮转子任务。由于激活元素是需要被轮转至激活展示位的，因此可以通过激活元素的轮转任务以及轮播元素的排列顺序来确定其他各非激活轮播元素的轮转子任务。

仍然以图5中的例子对轮转子任务进行说明，如图5所示，当轮播元素P5被激活事件激活成为激活元素时，得到P5的轮转任务是按照索引位置的顺序向前轮转3个索引位置(在视图中为向左轮转3个索引位置)，为了保证轮播元素的排列顺序整体保持不变，其他各非激活轮播元素也应当从其当前所在的索引位置开始按照索引位置的顺序向前轮转3个索引位置，如此便产生了每个非激活轮播元素的轮转子任务，P1的轮转子任务是从第2个索引位置向左轮转至第6个索引位置，P2的轮转子任务是从第3个索引位置向左轮转至第0个索引位置，P3的轮转子任务是从第4个索引位置向左轮转至第1个索引位置，P4的轮转子任务是从第5个索引位置向左轮转至第2个索引位置，P6的轮转子任务是从第0个索引位置向左轮转至第4个索引位置。如果激活元素P5的轮转任务是按照索引位置的倒序来进行轮转，将P5按照索引位置的顺序向后轮转4个索引位置(在视图中为先向右循环轮转至最左侧的索引位置，然后再向右轮转3个索引位置轮转至激活展示位)轮转至激活展示位，则基于该轮转任务产生的其他各非激活轮播元素的轮转子任务也为按照索引位置的顺序向后轮转4个索引位置，如此便产生的每个非激活轮播元素的轮转子任务为，P1的轮转子任务是从第2个索引位置向右轮转至第6个索引位置，P2的轮转子任务是从第3个索引位置向右轮转至第0个索引位置，P3的轮转子任务是从第4个索引位置向右轮转至第1个索引位置，P4的轮转子任务是从第5个索引位置向右轮转至第2个索引位置，P6的轮转子任务是从第0个索引位置向右轮转至第4个索引位置。

可以理解的是，为了使轮播过程中的轮播动画具有更好的观感，在得到轮转任务和轮转子任务后，同时执行激活元素和非激活轮播元素对应的轮播任务和轮播子任务，如果存在多种轮转方案，可以选择轮转距离最少的轮转任务来对轮播元素进行轮播操作。

本实施例中的元素轮播方法，采用了很多CSS3的新特性如perspective、offset-path、translate3d等，在这些属性的驱动下，会使本实施例中的元素轮播方法在对轮播元素进行轮播时的动画效果更接近于真实的3D效果，同时，这些属性还能够把GPU的渲染加入了进来，缓解CPU的计算压力的同时，也会使轮转动画更流畅，改善了用户体验。

应理解，上述实施例中各步骤的序号的大小并不意味着执行顺序的先后，各过程的执行顺序应以其功能和内在逻辑确定，而不应对本发明实施例的实施过程构成任何限定。

请参阅图6，图6是本申请一实施例中提供的一种元素轮播装置的模块构成图。

作为本申请一实施例，提供一种元素轮播装置，该元素轮播装置与上述实施例中元素轮播方法一一对应。参见图6，元素轮播装置1包括：轮播空间渲染模块10、轮播元素确定模块20、索引位置确定模块30、轮播执行模块40，其中：

轮播空间渲染模块10，用于响应于对页面文件进行加载的指令，渲染页面中的N个轮播空间；其中，所述页面文件为服务器根据页面请求返回的文件；N为大于0的整数；

轮播元素确定模块20，用于确定将在每个所述轮播空间中进行轮播的轮播元素集合；其中，所述轮播元素集合包括至少两个轮播元素；

索引位置确定模块30，用于根据所述轮播元素集合在所述轮播空间中的轮播轨迹，确定所述轮播元素在所述轮播轨迹中的多个索引位置；

轮播执行模块40，基于每个索引位置的顺序，在所述轮播空间中对所述轮播元素进行轮播操作。

作为本申请一实施例，所述轮播执行模块40还包括：激活展示位确定单元、激活指令获取单元和轮播执行单元，其中：

激活展示位确定单元，用于在所述多个索引位置中确定激活展示位；

激活指令获取单元，用于获取元素激活指令，根据所述元素激活指令激活对应的轮播元素得到激活元素；

轮播执行单元，用于根据所述激活元素所在的索引位置的顺序和所述激活展示位所对应的索引位置的顺序，将所述激活元素轮转至所述激活展示位。

作为本申请一实施例，轮播执行单元还包括激活元素轮转子单元和非激活轮播元素轮转子单元，其中：

激活元素轮转子单元，用于根据所述轮播元素的排列顺序确定非激活轮播元素的轮转子任务，根据所述轮转子任务将所述非激活轮播元素轮转至对应的索引位置；

非激活轮播元素轮转子单元，用于根据所述轮播元素的排列顺序确定非激活轮播元素的轮转子任务，根据所述轮转子任务将所述非激活轮播元素轮转至对应的索引位置。

关于元素轮播装置的具体限定可以参见上文中对于元素轮播方法的限定，在此不再赘述。上述元素轮播装置中的各个模块可全部或部分通过软件、硬件及其组合来实现。上述各模块可以硬件形式内嵌于或独立于计算机设备中的处理器中，也可以以软件形式存储于计算机设备中的存储器中，以便于处理器调用执行以上各个模块对应的操作。

请参阅图7，图7是本申请一实施例中计算机设备的一示意图。

作为本申请一实施例，提供一种计算机设备，该计算机设备可以是服务器，其内部结构图可以如图7所示。该计算机设备包括通过系统总线连接的处理器、存储器、网络接口和数据库。其中，该计算机设备的处理器用于提供计算和控制能力。该计算机设备的存储器包括非易失性存储介质、内存储器。该非易失性存储介质存储有操作系统、计算机程序和数据库。该内存储器为非易失性存储介质中的操作系统和计算机程序的运行提供环境。该计算机设备的网络接口用于与外部的终端通过网络连接通信。该计算机程序被处理器执行时以实现一种元素轮播方法。

作为本申请一实施例，提供了一种计算机设备，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，处理器执行计算机程序时实现以下步骤：

响应于对页面文件进行加载的指令，渲染页面中的N个轮播空间；其中，所述页面文件为服务器根据页面请求返回的文件；N为大于0的整数；

确定将在每个所述轮播空间中进行轮播的轮播元素集合；其中，所述轮播元素集合包括至少两个轮播元素；

根据所述轮播元素集合在所述轮播空间中的轮播轨迹，确定所述轮播元素在所述轮播轨迹中的多个索引位置；

基于每个索引位置的顺序，在所述轮播空间中对所述轮播元素进行轮播操作。

作为本申请一实施例，提供了一个或多个存储有计算机可读指令的计算机可读存储介质，本实施例所提供的可读存储介质包括非易失性可读存储介质和易失性可读存储介质。可读存储介质上存储有计算机可读指令，计算机可读指令被一个或多个处理器执行时实现以下步骤：

响应于对页面文件进行加载的指令，渲染页面中的N个轮播空间；其中，所述页面文件为服务器根据页面请求返回的文件；N为大于0的整数；

确定将在每个所述轮播空间中进行轮播的轮播元素集合；其中，所述轮播元素集合包括至少两个轮播元素；

根据所述轮播元素集合在所述轮播空间中的轮播轨迹，确定所述轮播元素在所述轮播轨迹中的多个索引位置；

基于每个索引位置的顺序，在所述轮播空间中对所述轮播元素进行轮播操作。

本领域普通技术人员可以理解实现上述实施例方法中的全部或部分流程，是可以通过计算机可读指令来指令相关的硬件来完成，所述的计算机可读指令可存储于一非易失性可读取存储介质或易失性可读存储介质中，该计算机可读指令在执行时，可包括如上述各方法的实施例的流程。其中，本申请所提供的各实施例中所使用的对存储器、存储、数据库或其它介质的任何引用，均可包括非易失性和/或易失性存储器。非易失性存储器可包括只读存储器(ROM)、可编程ROM(PROM)、电可编程ROM(EPROM)、电可擦除可编程ROM(EEPROM)或闪存。易失性存储器可包括随机存取存储器(RAM)或者外部高速缓冲存储器。作为说明而非局限，RAM以多种形式可得，诸如静态RAM(SRAM)、动态RAM(DRAM)、同步DRAM(SDRAM)、双数据率SDRAM(DDRSDRAM)、增强型SDRAM(ESDRAM)、同步链路(Synchlink)DRAM(SLDRAM)、存储器总线(Rambus)直接RAM(RDRAM)、直接存储器总线动态RAM(DRDRAM)、以及存储器总线动态RAM(RDRAM)等。

所属领域的技术人员可以清楚地了解到，为了描述的方便和简洁，仅以上述各功能单元、模块的划分进行举例说明，实际应用中，可以根据需要而将上述功能分配由不同的功能单元、模块完成，即将所述装置的内部结构划分成不同的功能单元或模块，以完成以上描述的全部或者部分功能。

以上所述实施例仅用以说明本发明的技术方案，而非对其限制；尽管参照前述实施例对本发明进行了详细的说明，本领域的普通技术人员应当理解：其依然可以对前述各实施例所记载的技术方案进行修改，或者对其中部分技术特征进行等同替换；而这些修改或者替换，并不使相应技术方案的本质脱离本发明各实施例技术方案的精神和范围，均应包含在本发明的保护范围之内。

Claims (10)

1.一种元素轮播方法，其特征在于，所述方法包括：

响应于对页面文件进行加载的指令，渲染页面中的N个轮播空间；其中，所述页面文件为服务器根据页面请求返回的文件；N为大于0的整数；

确定将在每个所述轮播空间中进行轮播的轮播元素集合；其中，所述轮播元素集合包括至少两个轮播元素；

根据所述轮播元素集合在所述轮播空间中的轮播轨迹，确定所述轮播元素在所述轮播轨迹中的多个索引位置；

基于每个索引位置的顺序，在所述轮播空间中对所述轮播元素进行轮播操作。

2.如权利要求1所述的元素轮播方法，其特征在于，所述根据所述轮播元素集合在所述轮播空间中的轮播轨迹，确定所述轮播元素在所述轮播轨迹中的多个索引位置包括：

根据所述轮播元素的个数，在所述轮播轨迹中设置和所述轮播元素的个数相同的索引位置。

3.如权利要求1所述的元素轮播方法，其特征在于，所述基于每个索引位置的顺序，在所述轮播空间中对所述轮播元素进行轮播操作包括：

在所述多个索引位置中确定激活展示位；

获取元素激活指令，根据所述元素激活指令激活对应的轮播元素得到激活元素；

根据所述激活元素所在的索引位置的顺序和所述激活展示位所对应的索引位置的顺序，将所述激活元素轮转至所述激活展示位。

4.如权利要求3所述的元素轮播方法，其特征在于，所述元素激活指令包括默认激活指令和激活事件；

所述默认激活指令按照预定的时间间隔，按照所述轮播元素的排列顺序，在所述轮播元素间依次流转，当默认激活指令流转到某一轮播元素时，该轮播元素被激活，成为激活元素；

所述激活事件发生时，所述激活事件对应的轮播元素立刻被激活成为激活元素。

5.如权利要求4所述的元素轮播方法，其特征在于，所述激活事件的激活优先级高于所述默认激活指令的激活优先级；

当轮播元素被所述激活事件激活成为激活元素时，所述默认激活指令从所述激活元素开始流转。

6.如权利要求3所述的元素轮播方法，其特征在于，所述根据所述激活元素所在的索引位置的顺序和所述激活展示位所对应的索引位置的顺序，将所述激活元素轮转至所述激活展示位包括：

根据所述激活元素所在的索引位置的顺序和所述激活展示位所对应的索引位置的顺序，计算所述激活元素所在的索引位置和所述激活展示位的距离，根据所述距离确定轮转任务，根据所述轮转任务将所述激活元素轮转至所述激活展示位。

7.如权利要求6所述的元素轮播方法，其特征在于，所述轮转任务还包括：根据所述轮播元素的排列顺序确定非激活轮播元素的轮转子任务，根据所述轮转子任务将所述非激活轮播元素轮转至对应的索引位置。

8.一种元素轮播装置，其特征在于，所述装置包括：

轮播空间渲染模块，用于响应于对页面文件进行加载的指令，渲染页面中的N个轮播空间；其中，所述页面文件为服务器根据页面请求返回的文件；N为大于0的整数；

轮播元素确定模块，用于确定将在每个所述轮播空间中进行轮播的轮播元素集合；其中，所述轮播元素集合包括至少两个轮播元素；

索引位置确定模块，用于根据所述轮播元素集合在所述轮播空间中的轮播轨迹，确定所述轮播元素在所述轮播轨迹中的多个索引位置；

轮播执行模块，基于每个索引位置的顺序，在所述轮播空间中对所述轮播元素进行轮播操作。

9.一种计算机设备，包括存储器、处理器以及存储在所述存储器中并可在所述处理器上运行的计算机程序，其特征在于，所述处理器执行所述计算机程序时实现如权利要求1至7任一项所述的元素轮播方法。

10.一种计算机可读存储介质，所述计算机可读存储介质存储有计算机程序，其特征在于，所述计算机程序被处理器执行时实现如权利要求1至7任一项所述的元素轮播方法。

Images