一种图片轮播方法、装置、设备及计算机可读存储介质制造方法及图纸

本申请公开了一种图片轮播方法，包括当接收到图片轮播指令时，根据图片轮播指令确定轮播方向；当轮播方向为向后轮播时，获取当前占位符的后侧相邻占位符中的图片src，并将后侧相邻占位符中的图片src转移至当前占位符中；当轮播方向为向前轮播时，获取当前占位符的前侧相邻占位符中的图片src，并将前侧相邻占位符中的图片src转移至当前占位符中；利用前端界面对当前占位符中的图片src对应的图像信息进行显示，完成图片轮播；该图片轮播方法可以有效避免轮播图在前端界面的卡顿情况，保证了用户体验。本申请还公开了一种图片轮播装置、设备及计算机可读存储介质，均具有上述有益效果。

A method, device, device and computer-readable storage medium for picture rotation

【技术实现步骤摘要】
一种图片轮播方法、装置、设备及计算机可读存储介质
本申请涉及多媒体
，特别涉及一种图片轮播方法，还涉及一种图片轮播装置、设备以及计算机可读存储介质。
技术介绍
轮播图技术是将承载着预设信息的多张图片，在显示界面进行轮流呈现的一种技术，以便浏览者可以方便快速的了解到其想要传达的信息，多用于产品推广、信息宣传，类似于PPT放映，是一种常见的用于展示重要内容的信息传播方式。在现有的图片轮播过程中，一般是预先一次性完成页面渲染，再执行图片轮播操作，但是，在面对超大数据量轮播图的情况下，若仍然采用该种轮播图实现方法，在进行大数据量页面的渲染过程中，很容易出现由于页面占用内存过大、页面内DOM节点过多造成大量图片卡死在前端界面的问题，进而导致图片加载时间过长，既不利于前端性能优化，又降低了用户体验。因此，如何有效避免轮播图在前端界面的卡顿情况，保证用户体验是本领域技术人员亟待解决的问题。
技术实现思路
本申请的目的是提供一种图片轮播方法，该图片轮播方法可以有效避免轮播图在前端界面的卡顿情况，保证了用户体验；本申请的另一目的是提供一种图片轮播装置、设备以及计算机可读存储介质，也具有上述有益效果。为解决上述技术问题，本申请提供了一种图片轮播方法，所述图片轮播方法包括：当接收到图片轮播指令时，根据所述图片轮播指令确定轮播方向；当所述轮播方向为向后轮播时，获取当前占位符的后侧相邻占位符中的图片src，并将所述后侧相邻占位符中的图片src转移至所述当前占位符中；当所述轮播方向为向前轮播时，获取当前占位符的前侧相邻占位符中的图片src，并将所述前侧相邻占位符中的图片src转移至所述当前占位符中；利用前端界面对所述当前占位符中的图片src对应的图像信息进行显示，完成图片轮播。优选的，所述当接收到图片轮播指令时，根据所述图片轮播指令确定轮播方向之前，还包括：根据接收到的图片加载指令在所述前端界面构建预设数量个占位符；其中，所述预设数量的取值不低于3；根据所述图片加载指令进行图片加载，获得所述预设数量个图片src，并将各所述图片src对应插入至各所述占位符中；在各所述占位符中选取任一不处于边缘位置的占位符作为所述当前占位符；利用所述前端界面对所述当前占位符中的当前图片src对应的图像信息进行显示。优选的，所述将所述后侧相邻占位符中的图片src转移至所述当前占位符中之前，还包括：将所述当前占位符中的当前图片src转移至所述前侧相邻占位符中；将所述前侧相邻占位符中的图片src转移至预设图片src队列中。优选的，所述将所述后侧相邻占位符中的图片src转移至所述当前占位符中之后，还包括：从所述预设图片src队列中获取新的图片src转移至所述后侧相邻占位符中。优选的，所述图片轮播方法还包括：当所述前侧相邻占位符和所述后侧相邻占位符中不存在所述图片src时，生成图片轮播结束提示。优选的，所述图片轮播方法还包括：在所述前端界面中，通过CSS技术对所述前侧相邻占位符和所述后侧相邻占位符中的图片src对应的图像信息进行隐藏，并对所述当前占位符中的图片src对应的图像信息进行显示。优选的，利用js实现所述图片src在各所述占位符中的转移。为解决上述技术问题，本申请还提供了一种图片轮播装置，所述图片轮播装置包括：轮播方向确定模块，用于当接收到图片轮播指令时，根据所述图片轮播指令确定轮播方向；图片后向轮播模块，用于当所述轮播方向为向后轮播时，获取当前占位符的后侧相邻占位符中的图片src，并将所述后侧相邻占位符中的图片src转移至所述当前占位符中；图片前向轮播模块，用于当所述轮播方向为向前轮播时，获取当前占位符的前侧相邻占位符中的图片src，并将所述前侧相邻占位符中的图片src转移至所述当前占位符中；图片显示模块，用于利用前端界面对所述当前占位符中的图片src对应的图像信息进行显示，完成图片轮播。为解决上述技术问题，本申请还提供了一种图片轮播设备，所述图片轮播设备包括：存储器，用于存储计算机程序；处理器，用于执行所述计算机程序时实现上述任意一种图片轮播使能方法的步骤。为解决上述技术问题，本申请还提供了一种计算机可读存储介质，所述计算机可读存储介质上存储有计算机程序，所述计算机程序被处理器执行时实现上述任意一种图片轮播方法的步骤。本申请所提供的一种图片轮播方法，包括当接收到图片轮播指令时，根据所述图片轮播指令确定轮播方向；当所述轮播方向为向后轮播时，获取当前占位符的后侧相邻占位符中的图片src，并将所述后侧相邻占位符中的图片src转移至所述当前占位符中；当所述轮播方向为向前轮播时，获取当前占位符的前侧相邻占位符中的图片src，并将所述前侧相邻占位符中的图片src转移至所述当前占位符中；利用前端界面对所述当前占位符中的图片src对应的图像信息进行显示，完成图片轮播。可见，本申请所提供的图片轮播方法，预先在前端界面创建多个占位符，并在每个占位符中预存一个图片src(源文件)，进而通过前端界面对指定占位符中的图片src对应的图像信息进行显示，由此，在进行图片轮播时，只需要将图片src的存储位置转移至指定占位符中即可，相较于现有技术，无论轮播图片的数量多少，该种实现方式均无需进行页面的一次性渲染操作，在轮播操作过程中，只需要保证指定占位符的两个相邻占位符中存有图片src，即可通过转移图片src存储位置实现快速图片轮播，极大的减少了图片加载时间，有效避免了现有技术中轮播图片易于在前端界面出现卡顿的问题，保证了前端页面运行流畅，提升了用户体验，且优化了前端性能。本申请所提供的一种图片轮播装置、设备以及计算机可读存储介质，均具有上述有益效果，在此不再赘述。附图说明为了更清楚地说明本申请实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本申请的实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据提供的附图获得其他的附图。图1为本申请所提供的一种图片轮播方法的流程示意图；图2为本申请所提供的另一种图片轮播方法的流程示意图；图3为本申请所提供的一种图片轮播装置的结构示意图；图4为本申请所提供的一种图片轮播设备的结构示意图。具体实施方式本申请的核心是提供一种图片轮播方法，该图片轮播方法可以有效避免轮播图在前端界面的卡顿情况，保证了用户体验；本申请的另一核心是提供一种图片轮播装置、设备以及计算机可读存储介质，也具有上述有益效果。为使本申请实施例的目的、技术方案和优点更加清楚，下面将结合本申请实施例中的附图，对本申请实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例是本申请一部分实施例，而不是全部的实施例。基于本申请中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其它实施例，都属于本申请保护的范围。请参考图1，图1为本申请所提供的一种图片轮播方法的流程示意图，该图片轮播方法可以包括：S101：当接收到图片轮播指令时，根据图片轮播指令确定轮播方向；本步骤旨在实现图片轮播方向的确定，即根据接收到的图片轮播指令确定图片的轮播方向，如前向轮播或后向轮播。其中，图片轮播指令可由图片浏览者根据实际需求基于前端界面发起，若需要向后浏览图片，则可以指定后向轮播本文档来自技高网...

【技术保护点】
1.一种图片轮播方法，其特征在于，包括：当接收到图片轮播指令时，根据所述图片轮播指令确定轮播方向；当所述轮播方向为向后轮播时，获取当前占位符的后侧相邻占位符中的图片src，并将所述后侧相邻占位符中的图片src转移至所述当前占位符中；当所述轮播方向为向前轮播时，获取当前占位符的前侧相邻占位符中的图片src，并将所述前侧相邻占位符中的图片src转移至所述当前占位符中；利用前端界面对所述当前占位符中的图片src对应的图像信息进行显示，完成图片轮播。

【技术特征摘要】
1.一种图片轮播方法，其特征在于，包括：当接收到图片轮播指令时，根据所述图片轮播指令确定轮播方向；当所述轮播方向为向后轮播时，获取当前占位符的后侧相邻占位符中的图片src，并将所述后侧相邻占位符中的图片src转移至所述当前占位符中；当所述轮播方向为向前轮播时，获取当前占位符的前侧相邻占位符中的图片src，并将所述前侧相邻占位符中的图片src转移至所述当前占位符中；利用前端界面对所述当前占位符中的图片src对应的图像信息进行显示，完成图片轮播。2.如权利要求1所述的图片轮播方法，其特征在于，所述当接收到图片轮播指令时，根据所述图片轮播指令确定轮播方向之前，还包括：根据接收到的图片加载指令在所述前端界面构建预设数量个占位符；其中，所述预设数量的取值不低于3；根据所述图片加载指令进行图片加载，获得所述预设数量个图片src，并将各所述图片src对应插入至各所述占位符中；在各所述占位符中选取任一不处于边缘位置的占位符作为所述当前占位符；利用所述前端界面对所述当前占位符中的当前图片src对应的图像信息进行显示。3.如权利要求2所述的图片轮播方法，其特征在于，所述将所述后侧相邻占位符中的图片src转移至所述当前占位符中之前，还包括：将所述当前占位符中的当前图片src转移至所述前侧相邻占位符中；将所述前侧相邻占位符中的图片src转移至预设图片src队列中。4.如权利要求3所述的图片轮播方法，其特征在于，所述将所述后侧相邻占位符中的图片src转移至所述当前占位符中之后，还包括：从所述预设图片src队列中获取新的图片src转移至所述后侧相...

【专利技术属性】
技术研发人员：赵潇瑶，
申请(专利权)人：广东浪潮大数据研究有限公司，
类型：发明
国别省市：广东,44