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

本申请涉及自带状态的可控制轮播图组件实现方法及系统、计算机设备，方法包括：在轮播图组件的轮播图上添加一状态图标，用来标识轮播图是否属于自动轮播状态，是否需要手动进行切换；添加鼠标触发事件用来控制轮播图是否自动轮播；根据配置文件中各种属性配置轮播图；根据配置好的轮播图组件进行轮播图的呈现，并实时通过所述状态图标显示轮播状态；当发生鼠标触发事件，则控制轮播图组件进行相应的轮播切换。本申请通过给轮播图添加一个状态图标，用来标识轮播图是否属于自动轮播状态，是否需要手动进行切换，方便用户清楚的看到轮播的状态，通过添加鼠标触发事件来控制轮播图是否自动轮播，解决通过添加按钮控制使得界面过于繁琐的问题。

The implementation method, system and equipment of the controllable carousel chart component with its own state

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

【技术保护点】
1.一种自带状态的可控制轮播图组件实现方法，其特征在于，所述方法包括：/n采用vue框架引用封装好的轮播图组件；/n在轮播图组件的轮播图上添加一状态图标，用来标识轮播图是否属于自动轮播状态，是否需要手动进行切换；/n在轮播图组件的轮播图上添加鼠标触发事件用来控制轮播图是否自动轮播；/n根据配置文件中各种属性配置轮播图是否自动轮播、自动轮播切换时间间隔、当前容器显示的项数、以及轮播方向；配置轮播图数据；/n根据配置好的轮播图组件进行轮播图的呈现，并实时通过所述状态图标显示轮播状态；/n当发生鼠标触发事件，则控制轮播图组件进行相应的轮播切换。/n

【技术特征摘要】
1.一种自带状态的可控制轮播图组件实现方法，其特征在于，所述方法包括：
采用vue框架引用封装好的轮播图组件；
在轮播图组件的轮播图上添加一状态图标，用来标识轮播图是否属于自动轮播状态，是否需要手动进行切换；
在轮播图组件的轮播图上添加鼠标触发事件用来控制轮播图是否自动轮播；
根据配置文件中各种属性配置轮播图是否自动轮播、自动轮播切换时间间隔、当前容器显示的项数、以及轮播方向；配置轮播图数据；
根据配置好的轮播图组件进行轮播图的呈现，并实时通过所述状态图标显示轮播状态；
当发生鼠标触发事件，则控制轮播图组件进行相应的轮播切换。


2.根据权利要求1所述自带状态的可控制轮播图组件实现方法，其特征在于，所述采用vue框架引用封装好的轮播图组件的步骤之前还包括：
设置配置文件，设置有需要配置的属性以及属性的注释，使用vue组件方式，数据由父组件传递参数给轮播图组件。


3.根据权利要求1所述自带状态的可控制轮播图组件实现方法，其特征在于，所述采用vue框架引用封装好的轮播图组件的步骤包括：
采用vue框架封装轮播图组件；
采用vue框架引用封装好的轮播图组件。


4.根据权利要求1所述自带状态的可控制轮播图组件实现方法，其特征在于，所述根据配置文件中各种属性配置轮播图是否自动轮播、自动轮播切换时间间隔、当前容器显示的项数、以及轮播方向的步骤包括：
根据配置文件中各种属性、配置轮播图组件是否自动轮播；
配置自动轮播时间间隔；
配置当前轮播图组件可显示的项数；
配置轮播方向。


5.根据权利要求1所述自带状态的可控制轮播图组件实现方法，其特征在于，所述在轮播图组件的轮播图上添加一状态图标，用来标识轮播图是否属于自动轮播状态，是否需要手动进行切换的步骤包括：
设置鼠标选中时停止自动轮播，状态为右上...

【专利技术属性】
技术研发人员：王俊，姜坤，卫宣安，
申请(专利权)人：深圳震有科技股份有限公司，
类型：发明
国别省市：广东;44