CN108287888A - 一种页面的轮播方法及系统 - Google Patents

Abstract

本发明公开了一种页面的轮播方法，包括：当接收到对目标网站的页面轮播请求时，解析所述页面轮播请求包含的轮播类型；依据所述轮播类型，确定与所述轮播类型对应的轮播参数集，所述轮播参数集中包含多个轮播参数；将所述轮播参数集中的各个轮播参数传递到预设的目标轮播组件中；当检测到传递完成指令时，依据所述轮播参数集中的各个轮播参数，运行所述预设的目标轮播组件，实现所述目标网站的页面轮播。上述的轮播方法，依据轮播的类型，确定对应的轮播参数，将所述轮播参数传递到所述预设的目标轮播组件中，实现所述目标网站的页面轮播。避免了网站的底层轮播代码的大量重复、冗余，轮播代码的复用性很低的问题。

Description

一种页面的轮播方法及系统

技术领域

本发明涉及网站重构领域，尤其涉及一种页面的轮播方法及系统。

背景技术

如今，伴随着互联网技术的飞速发展，各种网站层出不穷，为了达到更好的用户体验和更高的访问量，网站的设计者会对网站进行重构，实现网站页面的轮播，在轮播过程中，轮播的页面并不是固定不变的，不定期的会对轮播页面进行更新，网每次轮播内容更新，都会建立一个轮播组件，通过对不同轮播组件的调用，实现网站轮播页面的更新。

发明人对现有的页面的轮播方法进行研究发现，该轮播组件底层的大部分代码具有相同性，造成网站的底层轮播代码的大量重复、冗余，轮播代码的复用性很低。

发明内容

有鉴于此，本发明提供一种页面的轮播方法及系统，用以解决现有技术中轮播组件底层的大部分代码具有相同性，造成网站的底层轮播代码的大量重复、冗余，轮播代码的复用性很低的问题，具体方案如下：

一种页面的轮播方法，包括：

当接收到对目标网站的页面轮播请求时，解析所述页面轮播请求包含的轮播类型；

依据所述轮播类型，确定与所述轮播类型对应的轮播参数集，所述轮播参数集中包含多个轮播参数；

将所述轮播参数集中的各个轮播参数传递到预设的目标轮播组件中；

当检测到传递完成指令时，依据所述轮播参数集中的各个轮播参数，运行所述预设的目标轮播组件，实现所述目标网站的页面轮播。

上述的方法，可选的，依据所述轮播类型，确定与所述轮播类型对应的轮播参数集，包括：

获取与所述页面轮播请求对应的各个待轮播页面；

确定与所述轮播类型对应的所述各个待轮播页面的轮播参数；

当检测到确定完成指令时，将所述各个待轮播页面的轮播参数进行汇总，得到所述轮播类型对应的轮播参数集。

上述的方法，可选的，若所述轮播类型为默认轮播时，确定与所述轮播类型对应的所述各个待轮播页面的参数包括：

获取所述各个待轮播页面的第一存储路径；

解析所述各个待轮播页面中的第一轮播标识，确定所述各个待轮播页面的第一轮播顺序。

上述的方法，可选的，若所述轮播类型为传参轮播时，确定与所述轮播类型对应的所述各个待轮播页面的参数包括：

获取所述各个待轮播页面的第二存储路径；

解析所述各个待轮播页面中第二轮播标识，确定所述各个待轮播页面的第二轮播顺序；

获取所述各个待轮播页面的第一轮播间隔和第一属性信息。

上述的方法，可选的，若所述轮播类型为自定义轮播时，确定与所述轮播类型对应的所述各个待轮播页面的参数包括：

获取所述各个待轮播页面的第三存储路径；

依据所述第三存储路径确定所述各个待轮播页面的自定义轮播内容；

解析所述各个待轮播页面中第三轮播标识，确定所述各个待轮播页面的第三轮播顺序。

一种页面的轮播系统，包括：

解析模块，用于当接收到对目标网站的页面轮播请求时，解析所述页面轮播请求包含的轮播类型；

确定模块，用于依据所述轮播类型，确定与所述轮播类型对应的轮播参数集，所述轮播参数集中包含多个轮播参数；

传递模块，用于将所述轮播参数集中的各个轮播参数传递到预设的目标轮播组件中；

轮播模块，用于当检测到传递完成指令时，依据所述轮播参数集中的各个轮播参数，运行所述预设的目标轮播组件，实现所述目标网站的页面轮播。

上述的系统，可选的，所述确定模块包括：

获取单元，用于获取与所述页面轮播请求对应的各个待轮播页面；

确定单元，用于确定与所述轮播类型对应的所述各个待轮播页面的轮播参数；

汇总单元，用于当检测到确定完成指令时，将所述各个待轮播页面的轮播参数进行汇总，得到所述轮播类型对应的轮播参数集。

上述的系统，可选的，所述确定单元包括：

第一获取子单元，用于获取所述各个待轮播页面的第一存储路径；

第一确定子单元，用于解析所述各个待轮播页面中的第一轮播标识，确定所述各个待轮播页面的第一轮播顺序。

上述的系统，可选的，所述确定单元包括：

第二确定子单元，用于获取所述各个待轮播页面的第二存储路径；

第三确定子单元，用于解析所述各个待轮播页面中第二轮播标识，确定所述各个待轮播页面的第二轮播顺序；

第二获取子单元，用于获取所述各个待轮播页面的第一轮播间隔和第一属性信息。

上述的系统，可选的，所述确定单元包括：

第三获取子单元，用于获取所述各个待轮播页面的第三存储路径；

第四确定子单元，用于依据所述第三存储路径确定所述各个待轮播页面的自定义轮播内容；

第五确定子单元，用于解析所述各个待轮播页面中第三轮播标识，确定所述各个待轮播页面的第三轮播顺序。

与现有技术相比，本发明包括以下优点：

本发明公开了一种页面的轮播方法，包括：当接收到对目标网站的页面轮播请求时，解析所述页面轮播请求包含的轮播类型；依据所述轮播类型，确定与所述轮播类型对应的轮播参数集，所述轮播参数集中包含多个轮播参数；将所述轮播参数集中的各个轮播参数传递到预设的目标轮播组件中；当检测到传递完成指令时，依据所述轮播参数集中的各个轮播参数，运行所述预设的目标轮播组件，实现所述目标网站的页面轮播。上述的轮播方法，依据轮播的类型，确定对应的轮播参数，将所述轮播参数传递到所述预设的目标轮播组件中，实现所述目标网站的页面轮播。避免了网站的底层轮播代码的大量重复、冗余，轮播代码的复用性很低的问题。

当然，实施本发明的任一产品并不一定需要同时达到以上所述的所有优点。

附图说明

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

图1为本申请实施例公开的一种页面的轮播方法流程图；

图2为本申请实施例公开的一种页面的轮播方法又一方法流程图；

图3为本申请实施例公开的一种页面的轮播方法又一方法流程图；

图4为本申请实施例公开的一种页面的轮播方法又一方法流程图；

图5为本申请实施例公开的一种页面的轮播方法又一方法流程图；

图6为本申请实施例公开的一种页面的轮播系统结构框图。

具体实施方式

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

对所公开的实施例的上述说明，使本领域专业技术人员能够实现或使用本发明。对这些实施例的多种修改对本领域的专业技术人员来说将是显而易见的，本文中所定义的一般原理可以在不脱离本发明的精神或范围的情况下，在其它实施例中实现。因此，本发明将不会被限制于本文所示的这些实施例，而是要符合与本文所公开的原理和新颖特点相一致的最宽的范围。

本发明提供了一种页面的轮播方法，所述方法的执行主体为包含目标轮播组件的处理器、控制器或者处理平台等。所述方法应用在网站的各个轮播页面的轮播过程中，所述方法的方法流程如图1所示，包括步骤：

S101、当接收到对目标网站的页面轮播请求时，解析所述页面轮播请求包含的轮播类型；

本发明实施例中，当接收到目标网站的轮播请求时，解析所述轮播请求中包含的轮播类型，所述轮播类型为默认轮播、传参轮播和自定义轮播中的一种。

S102、依据所述轮播类型，确定与所述轮播类型对应的轮播参数集，所述轮播参数集中包含多个轮播参数；

本发明实施例中，每一个轮播类型都对应不同的轮播参数，各个轮播参数构成了轮播参数集，所述轮播参数集中包括轮播页面的名称、存储路径、宽度和高度和轮播顺序等。

S103、将所述轮播参数集中的各个轮播参数传递到预设的目标轮播组件中；

本发明实施例中，依据已经确定的所述轮播参数集的各个轮播参数传递到所述预设的目标轮播组件中的对应位置。

S104、当检测到传递完成指令时，依据所述轮播参数集中的各个轮播参数，运行所述预设的目标轮播组件，实现所述目标网站的页面轮播。

本发明实施例中，当所述轮播参数集中的各个轮播参数传递完成时，依据所述各个轮播参数，运行所述预设的目标轮播组件，实现所述目标网站依据所述轮播类型进行轮播。

本发明实施例中，所述预设的目标轮播组件是采用react框架、ES6和LESS法构建的一个轮播组件，其中，ES6语法用于定义组件内部逻辑使用的方法等，LESS语法用于对页面的样式进行处理。所述预设的目标处理组件可以实现默认、传参数和自定义类型轮播，因此所述预设的目标轮播组件会为每一个轮播类型匹配对应的轮播参数，依据轮播类型，确定轮播参数，实现所述目标网站的页面轮播。依据所述预设的目标轮播组件还可以实现轮播页面的百叶窗、图片加载中等效果。

其中，每当所述目标网站有页面轮播请求时，需要将所述预设的目标轮播组件引入到所述目标网站对应的系统中，优选的，若所述预设的目标轮播组件的名称为"Carousel"，则通过如下的方式进行引入：

ImportCarousel from"Carousel"

本发明公开了一种页面的轮播方法，包括：当接收到对目标网站的页面轮播请求时，解析所述页面轮播请求包含的轮播类型；依据所述轮播类型，确定与所述轮播类型对应的轮播参数集，所述轮播参数集中包含多个轮播参数；将所述轮播参数集中的各个轮播参数传递到预设的目标轮播组件中；当检测到传递完成指令时，依据所述轮播参数集中的各个轮播参数，运行所述预设的目标轮播组件，实现所述目标网站的页面轮播。上述的轮播方法，依据轮播的类型，确定对应的轮播参数，将所述轮播参数传递到所述预设的目标轮播组件中，实现所述目标网站的页面轮播。避免了网站的底层轮播代码的大量重复、冗余，轮播代码的复用性很低的问题。

本发明实施例中，依据所述轮播类型，确定与所述轮播类型对应的轮播参数集的方法流程如图2所示，包括步骤：

S201、获取与所述页面轮播请求对应的各个待轮播页面；

本发明实施例中，优选的，获取所述页面轮播请求对应的各个待轮播页面的名称。

S202、确定与所述轮播类型对应的所述各个待轮播页面的轮播参数；

本发明实施例中，依据所述轮播类型，确定与所述轮播类型的各个轮播参数。

S203、当检测到确定完成指令时，将所述各个待轮播页面的轮播参数进行汇总，得到所述轮播类型对应的轮播参数集；

本发明实施例中，当检测到确定完成指令时，将所述轮播类型对应的各个轮播参数进行存储到与所述轮播类型对应的轮播参数集中。

本发明实施例中，若所述轮播类型为默认轮播时，确定与所述轮播类型对应的所述各个待轮播页面的参数的方法流程如图3所示，包括步骤：

S301、获取所述各个待轮播页面的第一存储路径；

本发明实施例中，优选的依据所述各个待轮播页面的名称，确定所述各个待轮播页面的第一存储路径。

S302、解析所述各个待轮播页面中的第一轮播标识，确定所述各个待轮播页面的第一轮播顺序。

本发明实施例中，所述各个带轮播页面均关联有播放标识，其中，一个待轮播页面关联一个播放标识，优选的，所述播放标识可以为数字编号，依据所述数字编号确定所述第一轮播顺序。

本发明实施例中，由于是默认的轮播方式，因此，轮播的时间间隔、各个待轮播页面的大小等都已经预设，不需要重新确定。

本发明实施例中，若所述轮播类型为传参轮播时，确定与所述轮播类型对应的所述各个待轮播页面的参数的方法流程如图4所示，包括步骤：

S401、获取所述各个待轮播页面的第二存储路径；

本发明实施例中，获取所述第二存储路径的方法与获取所述第一存储路径的方法相同，不再赘述。

S402、解析所述各个待轮播页面中第二轮播标识，确定所述各个待轮播页面的第二轮播顺序；

本发明实施例中，所述第二轮播顺序的确定与所述第一轮播顺序的确定方法相同，不再赘述。

S403、获取所述各个待轮播页面的第一轮播间隔和第一属性信息。

本发明实施例中，所述传参轮播中需要确定各个待轮播页面的第一轮播间隔，所述第一轮播间隔可以为用户设定的，也可以在一个预设的时间间隔集中选取。所述第一属性信息包含待轮播页面的高度和宽度信息以及其它的优选信息。

其中，传参轮播采用的是用索引控制轮播页面的展示，所述索引由所述第二轮播顺序确定，并计算出相应的轮播距离，设置好多长时间轮播一个页面：比如1s钟轮播一个页面，轮播一个页面需要0.5秒钟，轮播一个页面将该页面的索引赋值给自定义的变量，实现索引改变。

传属性实现轮播：通过传进相应的属性可以实现存在间隙的轮播，控制轮播的时间，以及可以控制轮播左右按钮的存在与否等功能。所述传参轮播的执行过程中，需要引用的地方，使用如下方法：

url，point,daltX,width,height等属性是根据用户的需求，需要传入的参数，

<Carouselurl＝{url地址(字符串)}point＝{true/false}

daltX＝{number}width＝{number}height＝{number}/>

本发明实施例中，若所述轮播类型为自定义轮播时，确定与所述轮播类型对应的所述各个待轮播页面的参数的方法流程如图5所示，包括步骤：

S501、获取所述各个待轮播页面的第三存储路径；

本发明实施例中，获取所述第三存储路径的方法与获取所述第一存储路径相同，不再赘述。

S502、依据所述第三存储路径确定所述各个待轮播页面的自定义轮播内容；

本发明实施例中，在所述第三存储路径下查找自定义轮播的内容，所示自定义轮播的内容是为每一个用户设定的个性化的轮播页面，可以依据用户之前的浏览记录确定自定义轮播的内容。查找的方式：优选的，为每一个自定义轮播页面设置自定义轮播标识，依据所述自定义轮播标识确定自定义轮播的内容，

S503、解析所述各个待轮播页面中第三轮播标识，确定所述各个待轮播页面的第三轮播顺序。

本发明实施例中，所述第三轮播顺序的确定与所述第一轮播顺序的确定方法相同，不再赘述。

本发明实施例中，引入轮播组件自定义要轮播的内容可以是图片或文字等，实现自定义轮播；例如：

<Carousel>引入的轮播组件

{this.props.children}自定义轮播内容

</Carousel>

本发明实施例中，与上述页面的轮播方法相对应的，本发明实施中还提供了一种页面的轮播系统，所述轮播系统的结构框图如图6所示，包括：

解析模块601，确定模块602，传递模块603和轮播模块604。

其中，

所述解析模块601，用于当接收到对目标网站的页面轮播请求时，解析所述页面轮播请求包含的轮播类型；

所述确定模块602，用于依据所述轮播类型，确定与所述轮播类型对应的轮播参数集，所述轮播参数集中包含多个轮播参数；

所述传递模块603，用于将所述轮播参数集中的各个轮播参数传递到预设的目标轮播组件中；

所述轮播模块604，用于当检测到传递完成指令时，依据所述轮播参数集中的各个轮播参数，运行所述预设的目标轮播组件，实现所述目标网站的页面轮播。

本发明公开了一种页面的轮播系统，包括：当接收到对目标网站的页面轮播请求时，解析所述页面轮播请求包含的轮播类型；依据所述轮播类型，确定与所述轮播类型对应的轮播参数集，所述轮播参数集中包含多个轮播参数；将所述轮播参数集中的各个轮播参数传递到预设的目标轮播组件中；当检测到传递完成指令时，依据所述轮播参数集中的各个轮播参数，运行所述预设的目标轮播组件，实现所述目标网站的页面轮播。上述的轮播系统，依据轮播的类型，确定对应的轮播参数，将所述轮播参数传递到所述预设的目标轮播组件中，实现所述目标网站的页面轮播。避免了网站的底层轮播代码的大量重复、冗余，轮播代码的复用性很低的问题。

本发明实施例中，所述确定模块602包括：获取单元，确定单元和汇总单元。

其中，

所述获取单元，用于获取与所述页面轮播请求对应的各个待轮播页面；

所述确定单元，用于确定与所述轮播类型对应的所述各个待轮播页面的轮播参数；

所述汇总单元，用于当检测到确定完成指令时，将所述各个待轮播页面的轮播参数进行汇总，得到所述轮播类型对应的轮播参数集；

本发明实施例中，所述确定单元包括：第一获取子单元和第一确定子单元。

其中，

所述第一获取子单元，用于获取所述各个待轮播页面的第一存储路径；

所述第一确定子单元，用于解析所述各个待轮播页面中的第一轮播标识，确定所述各个待轮播页面的第一轮播顺序。

本发明实施例中，所述确定单元还包括：第二确定子单元，第三确定子单元和第二获取子单元。

其中，

所述第二确定子单元，用于获取所述各个待轮播页面的第二存储路径；

所述第三确定子单元，用于解析所述各个待轮播页面中第二轮播标识，确定所述各个待轮播页面的第二轮播顺序；

所述第二获取子单元，用于获取所述各个待轮播页面的第一轮播间隔和第一属性信息。

本发明实施例中，所述确定单元还包括：第三获取子单元，第四确定子单元和第五确定子单元。

其中

所述第三获取子单元，用于获取所述各个待轮播页面的第三存储路径；

所述第四确定子单元，用于依据所述第三存储路径确定所述各个待轮播页面的自定义轮播内容；

所述第五确定子单元，用于解析所述各个待轮播页面中第三轮播标识，确定所述各个待轮播页面的第三轮播顺序。

需要说明的是，本说明书中的各个实施例均采用递进的方式描述，每个实施例重点说明的都是与其他实施例的不同之处，各个实施例之间相同相似的部分互相参见即可。对于装置类实施例而言，由于其与方法实施例基本相似，所以描述的比较简单，相关之处参见方法实施例的部分说明即可。

最后，还需要说明的是，在本申请中，诸如第一和第二等之类的关系术语仅仅用来将一个实体或者操作与另一个实体或操作区分开来，而不一定要求或者暗示这些实体或操作之间存在任何这种实际的关系或者顺序。而且，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、物品或者设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、物品或者设备所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括所述要素的过程、方法、物品或者设备中还存在另外的相同要素。

对所公开的实施例的上述说明，使本领域技术人员能够实现或使用本发明。对这些实施例的多种修改对本领域技术人员来说将是显而易见的，本文中所定义的一般原理可以在不脱离本发明的精神或范围的情况下，在其它实施例中实现。因此，本发明将不会被限制于本文所示的这些实施例，而是要符合与本文所公开的原理和新颖特点相一致的最宽的范围。

以上所述仅是本发明的优选实施方式，应当指出，对于本技术领域的普通技术人员来说，在不脱离本发明原理的前提下，还可以做出若干改进和润饰，这些改进和润饰也应视为本发明的保护范围。

Claims (10)

1.一种页面的轮播方法，其特征在于，包括：

当接收到对目标网站的页面轮播请求时，解析所述页面轮播请求包含的轮播类型；

依据所述轮播类型，确定与所述轮播类型对应的轮播参数集，所述轮播参数集中包含多个轮播参数；

将所述轮播参数集中的各个轮播参数传递到预设的目标轮播组件中；

当检测到传递完成指令时，依据所述轮播参数集中的各个轮播参数，运行所述预设的目标轮播组件，实现所述目标网站的页面轮播。

2.根据权利要求1所述的方法，其特征在于，依据所述轮播类型，确定与所述轮播类型对应的轮播参数集，包括：

获取与所述页面轮播请求对应的各个待轮播页面；

确定与所述轮播类型对应的所述各个待轮播页面的轮播参数；

当检测到确定完成指令时，将所述各个待轮播页面的轮播参数进行汇总，得到所述轮播类型对应的轮播参数集。

3.根据权利要求2所述的方法，其特征在于，若所述轮播类型为默认轮播时，确定与所述轮播类型对应的所述各个待轮播页面的参数包括：

获取所述各个待轮播页面的第一存储路径；

解析所述各个待轮播页面中的第一轮播标识，确定所述各个待轮播页面的第一轮播顺序。

4.根据权利要求2所述的方法，其特征在于，若所述轮播类型为传参轮播时，确定与所述轮播类型对应的所述各个待轮播页面的参数包括：

获取所述各个待轮播页面的第二存储路径；

解析所述各个待轮播页面中第二轮播标识，确定所述各个待轮播页面的第二轮播顺序；

获取所述各个待轮播页面的第一轮播间隔和第一属性信息。

5.根据权利要求2所述的方法，其特征在于，若所述轮播类型为自定义轮播时，确定与所述轮播类型对应的所述各个待轮播页面的参数包括：

获取所述各个待轮播页面的第三存储路径；

依据所述第三存储路径确定所述各个待轮播页面的自定义轮播内容；

解析所述各个待轮播页面中第三轮播标识，确定所述各个待轮播页面的第三轮播顺序。

6.一种页面的轮播系统，其特征在于，包括：

解析模块，用于当接收到对目标网站的页面轮播请求时，解析所述页面轮播请求包含的轮播类型；

确定模块，用于依据所述轮播类型，确定与所述轮播类型对应的轮播参数集，所述轮播参数集中包含多个轮播参数；

传递模块，用于将所述轮播参数集中的各个轮播参数传递到预设的目标轮播组件中；

轮播模块，用于当检测到传递完成指令时，依据所述轮播参数集中的各个轮播参数，运行所述预设的目标轮播组件，实现所述目标网站的页面轮播。

7.根据权利要求6所述的系统，其特征在于，所述确定模块包括：

获取单元，用于获取与所述页面轮播请求对应的各个待轮播页面；

确定单元，用于确定与所述轮播类型对应的所述各个待轮播页面的轮播参数；

汇总单元，用于当检测到确定完成指令时，将所述各个待轮播页面的轮播参数进行汇总，得到所述轮播类型对应的轮播参数集。

8.根据权利要求7所述的系统，其特征在于，所述确定单元包括：

第一获取子单元，用于获取所述各个待轮播页面的第一存储路径；

第一确定子单元，用于解析所述各个待轮播页面中的第一轮播标识，确定所述各个待轮播页面的第一轮播顺序。

9.根据权利要求7所述的系统，其特征在于，所述确定单元包括：

第二确定子单元，用于获取所述各个待轮播页面的第二存储路径；

第三确定子单元，用于解析所述各个待轮播页面中第二轮播标识，确定所述各个待轮播页面的第二轮播顺序；

第二获取子单元，用于获取所述各个待轮播页面的第一轮播间隔和第一属性信息。

10.根据权利要求7所述的系统，其特征在于，所述确定单元包括：

第三获取子单元，用于获取所述各个待轮播页面的第三存储路径；

第四确定子单元，用于依据所述第三存储路径确定所述各个待轮播页面的自定义轮播内容；

第五确定子单元，用于解析所述各个待轮播页面中第三轮播标识，确定所述各个待轮播页面的第三轮播顺序。