首页 / 专利库 / 电脑零配件 / 计算机系统 / 硬件 / 外围设备 / 鼠标 / 自带状态的可控制轮播图组件实现方法及系统、设备

自带状态的可控制轮播图组件实现方法及系统、设备

阅读:489发布:2020-05-08

专利汇可以提供自带状态的可控制轮播图组件实现方法及系统、设备专利检索,专利查询,专利分析的服务。并且本 申请 涉及自带状态的可控制轮播图组件实现方法及系统、计算机设备,方法包括:在轮播图组件的轮播图上添加一状态图标,用来标识轮播图是否属于自动轮播状态,是否需要手动进行切换;添加 鼠标 触发事件用来控制轮播图是否自动轮播;根据配置文件中各种属性配置轮播图;根据配置好的轮播图组件进行轮播图的呈现,并实时通过所述状态图标显示轮播状态;当发生鼠标触发事件,则控制轮播图组件进行相应的轮播切换。本申请通过给轮播图添加一个状态图标,用来标识轮播图是否属于自动轮播状态,是否需要手动进行切换,方便用户清楚的看到轮播的状态,通过添加鼠标触发事件来控制轮播图是否自动轮播,解决通过添加按钮控制使得界面过于繁琐的问题。,下面是自带状态的可控制轮播图组件实现方法及系统、设备专利的具体信息内容。

1.一种自带状态的可控制轮播图组件实现方法,其特征在于,所述方法包括:
采用vue框架引用封装好的轮播图组件;
在轮播图组件的轮播图上添加一状态图标,用来标识轮播图是否属于自动轮播状态,是否需要手动进行切换;
在轮播图组件的轮播图上添加鼠标触发事件用来控制轮播图是否自动轮播;
根据配置文件中各种属性配置轮播图是否自动轮播、自动轮播切换时间间隔、当前容器显示的项数、以及轮播方向;配置轮播图数据;
根据配置好的轮播图组件进行轮播图的呈现,并实时通过所述状态图标显示轮播状态;
当发生鼠标触发事件,则控制轮播图组件进行相应的轮播切换。
2.根据权利要求1所述自带状态的可控制轮播图组件实现方法,其特征在于,所述采用vue框架引用封装好的轮播图组件的步骤之前还包括:
设置配置文件,设置有需要配置的属性以及属性的注释,使用vue组件方式,数据由父组件传递参数给轮播图组件。
3.根据权利要求1所述自带状态的可控制轮播图组件实现方法,其特征在于,所述采用vue框架引用封装好的轮播图组件的步骤包括:
采用vue框架封装轮播图组件;
采用vue框架引用封装好的轮播图组件。
4.根据权利要求1所述自带状态的可控制轮播图组件实现方法,其特征在于,所述根据配置文件中各种属性配置轮播图是否自动轮播、自动轮播切换时间间隔、当前容器显示的项数、以及轮播方向的步骤包括:
根据配置文件中各种属性、配置轮播图组件是否自动轮播;
配置自动轮播时间间隔;
配置当前轮播图组件可显示的项数;
配置轮播方向。
5.根据权利要求1所述自带状态的可控制轮播图组件实现方法,其特征在于,所述在轮播图组件的轮播图上添加一状态图标,用来标识轮播图是否属于自动轮播状态,是否需要手动进行切换的步骤包括:
设置鼠标选中时停止自动轮播,状态为右上标记为灰色,代表停止自动轮播,可进行手动切换;设置鼠标取消选中时,状态为右上角标记为闪动的白色动画。
6.根据权利要求1所述自带状态的可控制轮播图组件实现方法,其特征在于,所述在轮播图组件的轮播图上添加鼠标触发事件用来控制轮播图是否自动轮播的步骤包括:
设置鼠标点击选中时停止自动轮播,鼠标再次点击取消选中。
7.一种自带状态的可控制轮播图组件实现系统,其特征在于,所述系统包括:
封装模,用于采用vue框架引用封装好的轮播图组件;
状态图标添加模块,用于在轮播图组件的轮播图上添加一状态图标,用来标识轮播图是否属于自动轮播状态,是否需要手动进行切换;
鼠标触发事件添加模块,用于在轮播图组件的轮播图上添加鼠标触发事件用来控制轮播图是否自动轮播;
配置模块,用于根据配置文件中各种属性配置轮播图是否自动轮播、自动轮播切换时间间隔、当前容器显示的项数、以及轮播方向;配置轮播图数据;
轮播图呈现模块,用于根据配置好的轮播图组件进行轮播图的呈现,并实时通过所述状态图标显示轮播状态;
轮播切换模块,用于当发生鼠标触发事件,则控制轮播图组件进行相应的轮播切换。
8.根据权利要求7所述的自带状态的可控制轮播图组件实现系统,其特征在于,还包括:
配置文件设置模块,用于设置配置文件,设置有需要配置的属性以及属性的注释,使用vue组件方式,数据由父组件传递参数给轮播图组件。
9.一种计算机设备,包括存储器和处理器,所述存储器存储有计算机程序,其特征在于,所述处理器执行所述计算机程序时实现权利要求1至6中任一项所述自带状态的可控制轮播图组件实现方法的步骤。
10.一种计算机可读存储介质,其上存储有计算机程序,其特征在于,所述计算机程序被处理器执行时实现权利要求1至6中任一项所述自带状态的可控制轮播图组件实现方法的步骤。

说明书全文

自带状态的可控制轮播图组件实现方法及系统、设备

技术领域

[0001] 本申请涉及前端界面处理技术领域,特别是涉及一种自带状态的可控制轮播图组件实现方法及系统、计算机设备、可读存储介质。

背景技术

[0002] 随着科技的发展,对于前端界面效果的要求也越来越高,现有技术中公开的开源或者不开源的轮播图组件都是自动轮播的,或者是手动进行切换的,再或者就是添加按钮来控制轮播。
[0003] 现有技术的轮播图组件界面过于繁琐,而且轮播时间间隔过于长的情况下,无法判断轮播图是否为自动轮播。
[0004] 因此,现有技术有待改进。发明内容
[0005] 本发明要解决的技术问题是,提供一种自带状态的可控制轮播图组件实现方法及系统、计算机设备、可读存储介质,本申请通过给轮播图添加一个状态图标,用来标识轮播图是否属于自动轮播状态,是否需要手动进行切换,方便用户清楚的看到轮播的状态。除此之外,通过添加鼠标触发事件来控制轮播图是否自动轮播,解决通过添加按钮控制使得界面过于繁琐的问题。
[0006] 一种自带状态的可控制轮播图组件实现方法,其中,所述方法包括:
[0007] 采用vue框架引用封装好的轮播图组件;
[0008] 在轮播图组件的轮播图上添加一状态图标,用来标识轮播图是否属于自动轮播状态,是否需要手动进行切换;
[0009] 在轮播图组件的轮播图上添加鼠标触发事件用来控制轮播图是否自动轮播;
[0010] 根据配置文件中各种属性配置轮播图是否自动轮播、自动轮播切换时间间隔、当前容器显示的项数、以及轮播方向;配置轮播图数据;
[0011] 根据配置好的轮播图组件进行轮播图的呈现,并实时通过所述状态图标显示轮播状态;
[0012] 当发生鼠标触发事件,则控制轮播图组件进行相应的轮播切换。
[0013] 所述自带状态的可控制轮播图组件实现方法,其中,所述采用vue框架引用封装好的轮播图组件的步骤之前还包括:
[0014] 设置配置文件,设置有需要配置的属性以及属性的注释,使用vue组件方式,数据由父组件传递参数给轮播图组件。
[0015] 所述自带状态的可控制轮播图组件实现方法,其中,所述采用vue框架引用封装好的轮播图组件的步骤包括:
[0016] 采用vue框架封装轮播图组件;
[0017] 采用vue框架引用封装好的轮播图组件。
[0018] 所述自带状态的可控制轮播图组件实现方法,其中,所述根据配置文件中各种属性配置轮播图是否自动轮播、自动轮播切换时间间隔、当前容器显示的项数、以及轮播方向的步骤包括:
[0019] 根据配置文件中各种属性、配置轮播图组件是否自动轮播;
[0020] 配置自动轮播时间间隔;
[0021] 配置当前轮播图组件可显示的项数;
[0022] 配置轮播方向。
[0023] 所述自带状态的可控制轮播图组件实现方法,其中,所述在轮播图组件的轮播图上添加一状态图标,用来标识轮播图是否属于自动轮播状态,是否需要手动进行切换的步骤包括:
[0024] 设置鼠标选中时停止自动轮播,状态为右上标记为灰色,代表停止自动轮播,可进行手动切换;设置鼠标取消选中时,状态为右上角标记为闪动的白色动画。
[0025] 所述自带状态的可控制轮播图组件实现方法,其中,所述在轮播图组件的轮播图上添加鼠标触发事件用来控制轮播图是否自动轮播的步骤包括:
[0026] 设置鼠标点击选中时停止自动轮播,鼠标再次点击取消选中。
[0027] 一种自带状态的可控制轮播图组件实现系统,其中,所述系统包括:
[0028] 封装模,用于采用vue框架引用封装好的轮播图组件;
[0029] 状态图标添加模块,用于在轮播图组件的轮播图上添加一状态图标,用来标识轮播图是否属于自动轮播状态,是否需要手动进行切换;
[0030] 鼠标触发事件添加模块,用于在轮播图组件的轮播图上添加鼠标触发事件用来控制轮播图是否自动轮播;
[0031] 配置模块,用于根据配置文件中各种属性配置轮播图是否自动轮播、自动轮播切换时间间隔、当前容器显示的项数、以及轮播方向;配置轮播图数据;
[0032] 轮播图呈现模块,用于根据配置好的轮播图组件进行轮播图的呈现,并实时通过所述状态图标显示轮播状态;
[0033] 轮播切换模块,用于当发生鼠标触发事件,则控制轮播图组件进行相应的轮播切换。
[0034] 所述的自带状态的可控制轮播图组件实现系统,其中,还包括:
[0035] 配置文件设置模块,用于设置配置文件,设置有需要配置的属性以及属性的注释,使用vue组件方式,数据由父组件传递参数给轮播图组件。
[0036] 一种计算机设备,包括存储器和处理器,所述存储器存储有计算机程序,其中,所述处理器执行所述计算机程序时实现任一项所述自带状态的可控制轮播图组件实现方法的步骤。
[0037] 一种计算机可读存储介质,其上存储有计算机程序,其中,所述计算机程序被处理器执行时实现任一项所述自带状态的可控制轮播图组件实现方法的步骤。
[0038] 与现有技术相比,本发明实施例具有以下优点:
[0039] 本发明实施方式提供一种一带状态的可控制轮播图组件实现方法及系统、计算机设备、可读存储介质;采用vue框架封装轮播图组件,集合第三方开源的轮播图组件代码,实现轮播图的呈现,满足基本的轮播功能。根据配置文件中各种属性可以配置轮播图是否自动轮播(autoplay)、自动轮播切换时间间隔(delay)、当前容器可以显示几项(slidesPerView)、轮播方向(direction)等;配置文件一方面满足不同人员与对于轮播图属性的修改,另一方面方便一些非开发人员进行轮播图样式的配置修改。本申请在配置文件,有需要配置的属性以及属性的注释。使用vue组件方式,数据由父组件传递参数给轮播图组件。通过鼠标点击事件来控制轮播图自动轮播,代替原有的添加按钮来控制轮播图轮播的方式,既简化界面,又方便用户进行操作;与此同时,轮播图右上角添加状态图标,直接明了的告知用户当前轮播图的轮播状态,避免用户进行不必要的操作,浪费时间,提高了操作效率。附图说明
[0040] 为了更清楚地说明本发明实施例或现有技术中的技术方案,下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍,显而易见地,下面描述中的附图仅仅是本发明中记载的一些实施例,对于本领域普通技术人员来讲,在不付出创造性劳动的前提下,还可以根据这些附图获得其他的附图。
[0041] 图1为本发明实施例中一种自带状态的可控制轮播图组件实现方法的流程示意图。
[0042] 图2为本发明实施例中一种自带状态的可控制轮播图组件实现方法的配置文件以及说明示意图。
[0043] 图3为本发明实施例中一种自带状态的可控制轮播图组件实现方法的发生鼠标触发事件的手动切换状态结构示意图。
[0044] 图4为本发明实施例中一种自带状态的可控制轮播图组件实现方法的发生鼠标触发事件的自动轮播状态结构示意图。
[0045] 图5为本发明实施例中一种自带状态的可控制轮播图组件实现方法的具体应用实施例流程示意图。
[0046] 图6为本发明实施例中一种自带状态的可控制轮播图组件实现系统的结构示意图。
[0047] 图7为本发明实施例中计算机设备的内部结构图。

具体实施方式

[0048] 为了使本技术领域的人员更好地理解本发明方案,下面将结合本发明实施例中的附图,对本发明实施例中的技术方案进行清楚、完整地描述,显然,所描述的实施例仅是本发明一部分实施例,而不是全部的实施例。基于本发明中的实施例,本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例,都属于本发明保护的范围。
[0049] 发明人经过研究发现,现有技术的动态路网的实现难度大,面临两个问题:1.完全不具备可用性,仅依靠CPU在并行计算方面孱弱的性能和第三方库结合开发的动态路网,运行效率极低。为实现这种效果,导致内存膨胀以及运行率严重下降,没有有效利用图形学方法和3D加速器GPU的优势。2.具备一定可用性,性能达标,但其实现依赖于特定的第三方库,实现效果较为死板大部分属性无法配置,也很难与现有系统进行结合。
[0050] 为了解决上述问题,在本发明实施例中,一种自带状态的可控制轮播图组件实现方法;依靠图形学方法和3D加速器GPU并行计算所有路网的动态数据,低内存高效运行。同时由于完全从底层glsl编写具备改写路网效果的各种接口,可以控制线颜色/长度/宽窄/稀疏度/流转运动速度。
[0051] GPU,又称显示核心、视觉处理器、显示芯片,是一种专在个人电脑、工作站、游戏机和一些移动设备(如平板电脑、智能手机等)上图像运算工作的微处理器,与CPU类似,只不过GPU是专为执行复杂的数学和几何计算而设计的,这些计算是图形渲染所必需的。
[0052] 下面结合附图,详细说明本发明的各种非限制性实施方式。
[0053] 请参阅图1,图1示出了本发明实施例的自带状态的可控制轮播图组件实现方法,如图1所示,本发明实施例所述方法包括:
[0054] S10、采用vue框架引用封装好的轮播图组件;
[0055] 本发明实施例中,自带状态的可控制轮播图组件首先采用vue框架封装轮播图组件,集合第三方开源的轮播图组件代码,实现轮播图的呈现,满足基本的轮播功能。首先是采用vue框架引用封装好的轮播图组件。
[0056] S20、在轮播图组件的轮播图上添加一状态图标,用来标识轮播图是否属于自动轮播状态,是否需要手动进行切换。
[0057] 本发明实施例中在轮播图组件的轮播图上添加一状态图标,用来标识轮播图是否属于自动轮播状态,是否需要手动进行切换。
[0058] 如图3和图4所示,设置鼠标选中时停止自动轮播,状态如下图2,右上角标记为灰色,代表停止自动轮播,可以进行手动切换;设置鼠标取消选中时,状态如下图3,右上角标记为闪动的白色动画。
[0059] S30、在轮播图组件的轮播图上添加鼠标触发事件用来控制轮播图是否自动轮播;
[0060] 本发明实施例中;通过添加鼠标点击事件来控制轮播图自动轮播,代替原有的添加按钮来控制轮播图轮播的方式。例如设置鼠标点击选中时停止自动轮播,鼠标再次点击取消选中。
[0061] S40、根据配置文件中各种属性配置轮播图是否自动轮播、自动轮播切换时间间隔、当前容器显示的项数、以及轮播方向;配置轮播图数据;
[0062] 本发明实施例中,根据配置文件中各种属性可以配置轮播图是否自动轮播(autoplay)、自动轮播切换时间间隔(delay)、当前容器可以显示几项(slidesPerView)、轮播方向(direction)等。
[0063] 本发明在具体实施时需要预先设置配置文件,设置有需要配置的属性以及属性的注释,使用vue组件方式,数据由父组件传递参数给轮播图组件,如果未传入数据,便显示默认的数据来渲染轮播图。
[0064] 如图1就是配置文件,其中有需要配置的属性以及属性的注释。
[0065] 本发明中通过配置文件一方面满足不同人员与对于轮播图属性的修改,另一方面方便一些非开发人员可以随意的进行轮播图样式的配置修改。比如在某个项目中,使用了轮播图组件,项目交给客户,客户想让轮播图轮播的慢一点,因为轮播太快可能会导致某一项还未看清便切换到下一项了。在引用目前存在的一些开源的或者未开源的轮播图出现此类问题时,就需要开发人员进行项目源代码的修改。此时要进行一系列的流程,比如第一步:现场技术支持人员从客户一方得知此需求记录下来;第二步:通过一系列的途径联系到开发此项目的开发人员;第三步:开发人员接收到此需求进行源代码的修改,可能将轮播时间间隔修改到20s、30s或者等等,修改完毕重新打包补丁包提供给技术支持;第四步:技术支持再演示给客户,如果达到客户要求还可以,一旦达不到客户的要求,便需要再重复此流程;显而易见,此间浪费了大量时间以及人物力,严重时还会影响项目验收、公司信誉等等。此时,如果采用本发明自带状态的可控制轮播图组件,客户一旦不满意轮播图的自动轮播切换时间间隔(delay)、当前容器可以显示几项(slidesPerView)、轮播方向(direction)等,就可以直接实时通过配置文件来修改轮播的时间间隔,以达到客户的要求,方便快捷,节约了大量的时间以及人力物力,提高了项目的灵活性。
[0066] S50、根据配置好的轮播图组件进行轮播图的呈现,并实时通过所述状态图标显示轮播状态;
[0067] 本申请中,通过轮播图右上角添加状态图标,直接明了的告知用户当前轮播图的轮播状态,避免用户进行不必要的操作,避免浪费时间。比如在某个项目中,使用了之前开源或者未开源的轮播图组件,通过添加一个或者两个按钮来控制轮播图的自动轮播,当按钮点击进行切换时,有可能客户点击了按钮,切换到了自动轮播的状态,但是时间间隔为20s,用户还要等20s才会看到轮播图轮播的效果,这样的话,每一次改变状态都要浪费20s,累积到最后,会导致浪费大量的时间;除此之外不乏有的客户性格比较急,不停的点击按钮,看看是否停止或启动自动轮播,此时严重的话可能会出现程序崩溃的问题;甚至有客户会误以为按钮没有切换状态的效果,再将此类问题反馈给现场技术支持人员,进而通知开法人员进行一系列问题定位的操作,更加浪费了时间以及人力物力。
[0068] 所以,本发明采用这个自带状态的可控制轮播图组件,右上角的状态图标可以直接明了的告知用户此时轮播图自动轮播的状态,如果出现上述情况,用户点击的时候直接可以看到状态,点击一次状态会实时的进行变更,通过看到状态变化就不会再继续点击了,也不会误以为鼠标点击没有切换自动轮播的效果,解决了此前的轮播图状态不明确的问题,还节省了大量的时间以及人力物力,避免了客户操作出现问题。
[0069] 具体操作为:鼠标选中时停止自动轮播,状态如下图3,右上角标记为灰色,代表停止自动轮播,可以进行手动切换;鼠标取消选中时,状态如下图4,右上角标记为闪动的白色动画。
[0070] S60、当发生鼠标触发事件,则控制轮播图组件进行相应的轮播切换。
[0071] 具体操作为:如图3所示,鼠标点击选中时停止自动轮播,为手动切换状态;如图4所示为鼠标再次点击取消选中时,自动轮播状态。
[0072] 本发明实施例中通过鼠标点击事件来控制轮播图自动轮播的方式,一方面简化了界面,另一方面方便用户进行操作。比如在某个项目中,使用了之前开源或者未开源的轮播图组件,通过添加一个或者两个按钮来控制轮播图的自动轮播,不乏有客户或感觉这个界面添加个按钮会有点多余,原本一眼过去整整齐齐的界面,添加了一个按钮,会感觉有点奇怪,还影响美观。但是此时如果直接去掉按钮,会无法控制轮播图的轮播,导致无法满足客户想停下轮播来看某一项的需求,严重的话会让客户感觉到项目比较死板,无灵活性。
[0073] 本发明则采用这个自带状态的可控制轮播图组件,不用添加过多繁琐的东西,比如按钮等。简化了界面,让客户看到界面眼前一亮,轻易不会有界面过于繁琐的此类问题,轻轻松松达到客户的要求。
[0074] 以下通过一具体应用实施例对本发明方法做进一步详细说明:
[0075] 如图5所示,本发明具体应用实施例提供的一种自带状态的可控制轮播图组件实现方法,包括以下步骤:
[0076] 1)、开始;
[0077] 2)、采用vue框架引用封装好的轮播图组件;
[0078] 3)、在轮播图组件的轮播图上添加一状态图标,用来标识轮播图是否属于自动轮播状态,是否需要手动进行切换;
[0079] 4)、在轮播图组件的轮播图上添加鼠标触发事件用来控制轮播图是否自动轮播;
[0080] 5)、配置轮播图组件是否自动轮播(autoplay);
[0081] 6)、配置自动轮播时间间隔(delay);
[0082] 7)、配置当前轮播图容器可显示几项(slides PerView);
[0083] 8)、配置轮播方向(direction);
[0084] 9)、配置轮播图数据;
[0085] 10)、检测是否传入数据,当传入数据则渲染传入的数据,当没有传入数据,则采用默认数据,渲染默认数据;
[0086] 11)、鼠标点击,触发鼠标点击事件;
[0087] 12)、IsChecked==ture?判断鼠标是否被选中,当是则开启自动轮播,改变状态为自动轮播状态;当否则停止自动轮播,改变状态为停止轮播状态。
[0088] 13)、结束。
[0089] 由上可见,本发明所述方法本申请通过给轮播图添加一个状态图标,用来标识轮播图是否属于自动轮播状态,是否需要手动进行切换,方便用户清楚的看到轮播的状态。除此之外,通过添加鼠标触发事件来控制轮播图是否自动轮播,解决通过添加按钮控制使得界面过于繁琐的问题。
[0090] 在一个实施例中,本发明提供了一种自带状态的可控制轮播图组件实现系统,如图5所示,所述系统包括:
[0091] 封装模块41,用于采用vue框架引用封装好的轮播图组件;
[0092] 状态图标添加模块42,用于在轮播图组件的轮播图上添加一状态图标,用来标识轮播图是否属于自动轮播状态,是否需要手动进行切换;
[0093] 鼠标触发事件添加模块43,用于在轮播图组件的轮播图上添加鼠标触发事件用来控制轮播图是否自动轮播;
[0094] 配置模块44,用于根据配置文件中各种属性配置轮播图是否自动轮播、自动轮播切换时间间隔、当前容器显示的项数、以及轮播方向;配置轮播图数据;
[0095] 轮播图呈现模块45,用于根据配置好的轮播图组件进行轮播图的呈现,并实时通过所述状态图标显示轮播状态;
[0096] 轮播切换模块46,用于当发生鼠标触发事件,则控制轮播图组件进行相应的轮播切换。
[0097] 配置文件设置模块47,用于设置配置文件,设置有需要配置的属性以及属性的注释,使用vue组件方式,数据由父组件传递参数给轮播图组件;具体如上所述。
[0098] 在一个实施例中,本发明提供了一种计算机设备,该设备可以是终端,内部结构如图7所示。该计算机设备包括通过系统总线连接的处理器、存储器、网络接口、显示屏和输入系统。其中,该计算机设备的处理器用于提供计算和控制能力。该计算机设备的存储器包括非易失性存储介质、内存储器。该非易失性存储介质存储有操作系统和计算机程序。该内存储器为非易失性存储介质中的操作系统和计算机程序的运行提供环境。该计算机设备的网络接口用于与外部的终端通过网络连接通信。该计算机程序被处理器执行时以实现一种自然语言模型的生成方法。该计算机设备的显示屏可以是液晶显示屏或者电子显示屏,该计算机设备的输入系统可以是显示屏上覆盖的触摸层,也可以是计算机设备外壳上设置的按键、轨迹球或触控板,还可以是外接的键盘、触控板或鼠标等。
[0099] 本领域技术人员可以理解,图7所示的仅仅是与本申请方案相关的部分结构的框图,并不构成对本申请方案所应用于其上的计算机设备的限定,具体的计算机设备可以包括比图中所示更多或更少的部件,或者组合某些部件,或者具有不同的部件布置。
[0100] 本发明实施例提供了一种计算机设备,包括存储器和处理器,所述存储器存储有计算机程序,所述处理器执行所述计算机程序时实现以下步骤:
[0101] 采用vue框架引用封装好的轮播图组件;
[0102] 在轮播图组件的轮播图上添加一状态图标,用来标识轮播图是否属于自动轮播状态,是否需要手动进行切换;
[0103] 在轮播图组件的轮播图上添加鼠标触发事件用来控制轮播图是否自动轮播;
[0104] 根据配置文件中各种属性配置轮播图是否自动轮播、自动轮播切换时间间隔、当前容器显示的项数、以及轮播方向;配置轮播图数据;
[0105] 根据配置好的轮播图组件进行轮播图的呈现,并实时通过所述状态图标显示轮播状态;
[0106] 当发生鼠标触发事件,则控制轮播图组件进行相应的轮播切换,具体如上所述。
[0107] 综上所述,与现有技术相比,本发明实施例具有以下优点:
[0108] 本发明实施方式提供一种自带状态的可控制轮播图组件实现方法;方法包括:在轮播图组件的轮播图上添加一状态图标,用来标识轮播图是否属于自动轮播状态,是否需要手动进行切换;添加鼠标触发事件用来控制轮播图是否自动轮播;根据配置文件中各种属性配置轮播图;根据配置好的轮播图组件进行轮播图的呈现,并实时通过所述状态图标显示轮播状态;当发生鼠标触发事件,则控制轮播图组件进行相应的轮播切换。本申请通过给轮播图添加一个状态图标,用来标识轮播图是否属于自动轮播状态,是否需要手动进行切换,方便用户清楚的看到轮播的状态,通过添加鼠标触发事件来控制轮播图是否自动轮播,解决通过添加按钮控制使得界面过于繁琐的问题。
[0109] 以上所述实施例仅表达了本申请的几种实施方式,其描述较为具体和详细,但并不能因此而理解为对发明专利范围的限制。应当指出的是,对于本领域的普通技术人员来说,在不脱离本申请构思的前提下,还可以做出若干变形和改进,这些都属于本申请的保护范围。因此,本申请专利的保护范围应以所附权利要求为准。
高效检索全球专利

专利汇是专利免费检索,专利查询,专利分析-国家发明专利查询检索分析平台,是提供专利分析,专利查询,专利检索等数据服务功能的知识产权数据服务商。

我们的产品包含105个国家的1.26亿组数据,免费查、免费专利分析。

申请试用

分析报告

专利汇分析报告产品可以对行业情报数据进行梳理分析,涉及维度包括行业专利基本状况分析、地域分析、技术分析、发明人分析、申请人分析、专利权人分析、失效分析、核心专利分析、法律分析、研发重点分析、企业专利处境分析、技术处境分析、专利寿命分析、企业定位分析、引证分析等超过60个分析角度,系统通过AI智能系统对图表进行解读,只需1分钟,一键生成行业专利分析报告。

申请试用

QQ群二维码
意见反馈