一种图片轮播方法、装置、设备及计算机可读存储介质与流程

本申请涉及多媒体技术领域，特别涉及一种图片轮播方法，还涉及一种图片轮播装置、设备以及计算机可读存储介质。

背景技术：

轮播图技术是将承载着预设信息的多张图片，在显示界面进行轮流呈现的一种技术，以便浏览者可以方便快速的了解到其想要传达的信息，多用于产品推广、信息宣传，类似于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：当接收到图片轮播指令时，根据图片轮播指令确定轮播方向；

本步骤旨在实现图片轮播方向的确定，即根据接收到的图片轮播指令确定图片的轮播方向，如前向轮播或后向轮播。其中，图片轮播指令可由图片浏览者根据实际需求基于前端界面发起，若需要向后浏览图片，则可以指定后向轮播方向，若需要向前浏览图片，则可以指定前向轮播方向。

可以理解的是，上述前向轮播和后向轮播的轮播方向只是一种相对方向，并不指定唯一方向，例如，相对于计算机的显示界面而言，用户更倾向于左右滑动图片实现图片轮播，此时，向右轮播图片即对应与上述后向轮播，向左轮播图片即对应于上述前向轮播；相对于移动终端而言，也存在上下滑动图片实现图片轮播的情况，此时，向下轮播图片即对应于上述后向轮播，向上轮播图片即对应于上述前向轮播。

s102：当轮播方向为向后轮播时，获取当前占位符的后侧相邻占位符中的图片src，并将后侧相邻占位符中的图片src转移至当前占位符中；

首先，对进行图片轮播之前的预先准备工作进行介绍，具体的，可以在前端界面预先创建多个占位符，并在每个占位符中预存一个图片src，同时设定通过前端界面对其中一个指定的占位符中的图片src对应的图像信息进行显示，该指定占位符即为上述当前占位符，另外，在图像信息显示过程中，其他占位符中的图片src对应的图像信息进行隐藏即可。

作为一种优选实施例，该图片轮播方法还可以包括：

在前端界面中，通过css(cascadingstylesheets，层叠样式表)技术对前侧相邻占位符和后侧相邻占位符中的图片src对应的图像信息进行隐藏，并对当前占位符中的图片src对应的图像信息进行显示。

对于图像信息的隐藏方式，本申请提供了一种较为具体的实现方式，即基于css技术实现，具体而言，css是一种用来表现html(标准通用标记语言的一个应用)或xml(标准通用标记语言的一个子集)等文件样式的计算机语言，能够对网页中元素位置的排版进行像素级的精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力，不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。因此，在前端界面中，可以通过css技术对当前占位符中的图片src对应的图像信息进行显示，对其他占位符中的图片src对应的图像信息进行隐藏。

进一步，进行图片的后向轮播，可以理解的是，后向轮播是对当前显示图片的下一个图片进行显示，也即对下一个图片src对应的图像信息进行显示，因此，可以从与当前占位符相邻的后一个占位符，即上述后侧相邻占位符中获取图片src，并将其转移至当前占位符中。

优选的，上述将后侧相邻占位符中的图片src转移至当前占位符中之前，还可以包括：将当前占位符中的当前图片src转移至前侧相邻占位符中；将前侧相邻占位符中的图片src转移至预设图片src队列中。

具体的，由于当前占位符中本身存储有原始的图片src，即上述当前图片src，但向后轮播需要为后侧相邻占位符中的图片src提供存储空间，因此，可将当前图片src转移至前侧相邻占位符中，进一步，如果前侧相邻占位符之前不再有占位符，则可以将其中的图片src转移至预先构建的图片src队列中；如果前侧相邻占位符之前仍然存在占位符，则将各个占位符中的图片src依次向前移动即可。其中，预设图片src队列用于按照预设顺序对各个图片src进行存储，方便图片src的调取和插入。

优选的，上述将后侧相邻占位符中的图片src转移至当前占位符中之后，还可以包括：从预设图片src队列中获取新的图片src转移至后侧相邻占位符中。

具体的，在完成图片src转移之后，后侧相邻占位符中为空，不再存储有图片src，为保证图片轮播不间断，如果后侧相邻占位符之后不再有占位符，则可以在预设图片src队列中获取新的图片src，并存储至后侧相邻占位符中；如果后侧相邻占位符之后还有额外的占位符，则将后侧相邻占位符之后的各个占位符中的图片src依次向前转移即可。

s103：当轮播方向为向前轮播时，获取当前占位符的前侧相邻占位符中的图片src，并将前侧相邻占位符中的图片src转移至当前占位符中；

本步骤旨在实现图片的前向轮播，可以理解的是，前向轮播是对当前显示图片的前一个图片进行显示，也即对上一个图片src对应的图像信息进行显示，因此，可以从与当前占位符相邻的前一个占位符，即上述前侧相邻占位符中获取图片src，并将其转移至当前占位符中。

进一步，类似于上述后向轮播，优选的，上述将前侧相邻占位符中的图片src转移至当前占位符中之前，还可以包括：将当前占位符中的当前图片src转移至后侧相邻占位符中；将后侧相邻占位符中的图片src转移至预设图片src队列中。上述将前侧相邻占位符中的图片src转移至当前占位符中之后，还可以包括：从预设图片src队列中获取新的图片src转移至前侧相邻占位符中。对于其具体实现过程，参照前述后向轮播的具体介绍即可，本申请在此不再赘述。

可以理解的是，无论是后向轮播还是前向轮播，其宗旨在于保证当前占位符及其两个相邻占位符中均存储有图片src，以有效保证图片轮播的不间断。

优选的，利用js实现图片src在各占位符中的转移。

在本申请所提供的技术方案中，采用js(javascript，网页开发设计语言的一种)实现图片src在各个占位符中的转移，进而完成图片轮播。当然，还可以采用其他类型的网页开发设计语言，其具体选用类型并不影响本技术方案的实施。

s104：利用前端界面对当前占位符中的图片src对应的图像信息进行显示，完成图片轮播。

本步骤旨在实现图片的轮播显示，具体的，在将新的图片src转移到当前占位符中，完成图片src的转移之后，即可利用前端界面对当前占位符中新的图片src对应的图像信息进行显示，至此，完成一次图片轮播。

作为一种优选实施例，该图片轮播方法还可以包括：当前侧相邻占位符和后侧相邻占位符中不存在图片src时，生成图片轮播结束提示。

具体的，由于图片的数量是有限的，当选择前向轮播方式，轮播到第一张图片时，继续向前轮播将不会再有图片，或者选择后向轮播方式，轮播到最后一张图片时，继续向后轮播也将不会再有图片，此时，可以直接生成图片轮播结束提示，以告知浏览者当前图片轮播结束。

当然，也可以进行重复轮播，即当选择前向轮播方式，轮播到第一张图片时，继续向前轮播将会轮播到最后一张图片，当选择后向轮播方式，轮播到最后一张图片时，继续向后轮播将会轮播到第一张图片。当然，以上两种实现方式由图片浏览者进行自定义设置即可，本申请对此不做限定。

本申请所提供的图片轮播方法，预先在前端界面创建多个占位符，并在每个占位符中预存一个图片src(源文件)，进而通过前端界面对指定占位符中的图片src对应的图像信息进行显示，由此，在进行图片轮播时，只需要将图片src的存储位置转移至指定占位符中即可，相较于现有技术，无论轮播图片的数量多少，该种实现方式均无需进行页面的一次性渲染操作，在轮播操作过程中，只需要保证指定占位符的两个相邻占位符中存有图片src，即可通过转移图片src存储位置实现快速图片轮播，极大的减少了图片加载时间，有效避免了现有技术中轮播图片易于在前端界面出现卡顿的问题，保证了前端页面运行流畅，提升了用户体验，且优化了前端性能。

在上述实施例的基础上，请参考图2，图2为本申请所提供的一种图片轮播方法的流程示意图，该图片轮播方法可以包括：

s201：根据接收到的图片加载指令在前端界面构建预设数量个占位符；其中，预设数量的取值不低于3；

s202：根据图片加载指令进行图片加载，获得预设数量个图片src，并将各图片src对应插入至各占位符中；

s203：在各占位符中选取任一不处于边缘位置的占位符作为当前占位符；

s204：利用前端界面对当前占位符中的当前图片src对应的图像信息进行显示；

本实施例旨在对图片轮播过程中前期的图片预加载过程进行详细介绍，具体的，图片浏览者可以基于前端界面发起图片加载指令，此时创建预设数量个占位符，需要说明的是，此处占位符的数量不得低于3个，分别对应于上述当前占位符、前侧相邻占位符以及后侧相邻占位符，以保证可以随时进行前向图片轮播和后向图片轮播；进一步，根据图片加载指令进行图片加载，如在预设图片src队列中调取预设数量个图片src，并分别存储至对应的占位符中，此时，指定一个占位符用于实现图像显示功能，当然，该指定占位符为除第一个占位符和最后一个占位符之外的任意一个占位符，即上述任一不处于边缘位置的占位符，将其作为当前占位符，进而利用前端界面对其中的图片src对应的图像信息进行显示即可。由此，即可继续执行后续图片轮播操作流程。

s205：当接收到图片轮播指令时，根据图片轮播指令确定轮播方向；

s206：当轮播方向为向后轮播时，获取当前占位符的后侧相邻占位符中的图片src，并将后侧相邻占位符中的图片src转移至当前占位符中；

s207：当轮播方向为向前轮播时，获取当前占位符的前侧相邻占位符中的图片src，并将前侧相邻占位符中的图片src转移至当前占位符中；

s208：利用前端界面对当前占位符中的图片src对应的图像信息进行显示，完成图片轮播。

关于上述步骤s205至s208的具体实施过程可参照前述实施例的内容，在此不再进行赘述。

在上述各个实施例的基础上，本申请提供了一种更为具体的图片轮播方法，以下以预先构建3个占位符为例，对本实施例所提供的图片轮播方法进行介绍，其具体实现流程如下：

步骤一、在等待界面加载时，获取三个图片src；

步骤二、将获取的3个图片src分别插入至三个占位符内；

步骤三、图片平铺，并利用css布局只显示一张图片，其余隐藏，此处，显示的图片为第二个占位符中图片src对应的图像信息；

步骤四、检测用户的滑动手势；

步骤五、用户向左滑动手势，图片应向右轮播(后向轮播)，此时，通过js将第三个占位符中的图片src放置到第二个占位符内，将获取到的下一个图片src放置到第三个占位符内，将第二个占位符内原有的图片src放置在第一个占位符内；其中，若无法获取到新的图片src放置到第三个占位符内，则继续轮播时发出图片轮播结束指令；

步骤六、用户向右滑动手势，图片应向左轮播(前向轮播)，此时，通过js将第一个占位符中的图片src放置到第二个占位符内，将获取到的下一个图片src放置到第一个占位符内，将第二个占位符内原有的图片src放置在第三个占位符内；其中，若无法获取到新的图片src放置到第一个占位符内，则继续轮播时发出图片轮播结束指令。

可见，本申请实施例所提供的图片轮播方法，预先在前端界面创建多个占位符，并在每个占位符中预存一个图片src(源文件)，进而通过前端界面对指定占位符中的图片src对应的图像信息进行显示，由此，在进行图片轮播时，只需要将图片src的存储位置转移至指定占位符中即可，相较于现有技术，无论轮播图片的数量多少，该种实现方式均无需进行页面的一次性渲染操作，在轮播操作过程中，只需要保证指定占位符的两个相邻占位符中存有图片src，即可通过转移图片src存储位置实现快速图片轮播，极大的减少了图片加载时间，有效避免了现有技术中轮播图片易于在前端界面出现卡顿的问题，保证了前端页面运行流畅，提升了用户体验，且优化了前端性能。

为解决上述问题，请参考图3，图3为本申请所提供的一种图片轮播装置的结构示意图，该图片轮播装置可包括：

轮播方向确定模块10，用于当接收到图片轮播指令时，根据图片轮播指令确定轮播方向；

图片后向轮播模块20，用于当轮播方向为向后轮播时，获取当前占位符的后侧相邻占位符中的图片src，并将后侧相邻占位符中的图片src转移至当前占位符中；

图片前向轮播模块30，用于当轮播方向为向前轮播时，获取当前占位符的前侧相邻占位符中的图片src，并将前侧相邻占位符中的图片src转移至当前占位符中；

图片显示模块40，用于利用前端界面对当前占位符中的图片src对应的图像信息进行显示，完成图片轮播。

可见，本申请实施例所提供的图片轮播装置，预先在前端界面创建多个占位符，并在每个占位符中预存一个图片src(源文件)，进而通过前端界面对指定占位符中的图片src对应的图像信息进行显示，由此，在进行图片轮播时，只需要将图片src的存储位置转移至指定占位符中即可，相较于现有技术，无论轮播图片的数量多少，该种实现方式均无需进行页面的一次性渲染操作，在轮播操作过程中，只需要保证指定占位符的两个相邻占位符中存有图片src，即可通过转移图片src存储位置实现快速图片轮播，极大的减少了图片加载时间，有效避免了现有技术中轮播图片易于在前端界面出现卡顿的问题，保证了前端页面运行流畅，提升了用户体验，且优化了前端性能。

作为一种优选实施例，该图片轮播装置还可以包括图片预加载模块，用于根据接收到的图片加载指令在前端界面构建预设数量个占位符；其中，预设数量的取值不低于3；根据图片加载指令进行图片加载，获得预设数量个图片src，并将各图片src对应插入至各占位符中；在各占位符中选取任一不处于边缘位置的占位符作为当前占位符；利用前端界面对当前占位符中的当前图片src对应的图像信息进行显示。

作为一种优选实施例，上述图片后向轮播模块20还可用于将当前占位符中的当前图片src转移至前侧相邻占位符中；将前侧相邻占位符中的图片src转移至预设图片src队列中。

作为一种优选实施例，上述图片后向轮播模块20还可用于从预设图片src队列中获取新的图片src转移至后侧相邻占位符中。

作为一种优选实施例，该图片轮播装置还可以包括轮播结束提示模块，用于当前侧相邻占位符和后侧相邻占位符中不存在图片src时，生成图片轮播结束提示。

作为一种优选实施例，该图片轮播装置还可以包括前端图片预显示模块，用于在前端界面中，通过css技术对前侧相邻占位符和后侧相邻占位符中的图片src对应的图像信息进行隐藏，并对当前占位符中的图片src对应的图像信息进行显示。

对于本申请提供的装置的介绍请参照上述方法实施例，本申请在此不做赘述。

为解决上述问题，请参考图4，图4为本申请所提供的一种图片轮播设备的结构示意图，该图片轮播设备可包括：

存储器1，用于存储计算机程序；

处理器2，用于执行计算机程序时实现如下步骤：

当接收到图片轮播指令时，根据图片轮播指令确定轮播方向；当轮播方向为向后轮播时，获取当前占位符的后侧相邻占位符中的图片src，并将后侧相邻占位符中的图片src转移至当前占位符中；当轮播方向为向前轮播时，获取当前占位符的前侧相邻占位符中的图片src，并将前侧相邻占位符中的图片src转移至当前占位符中；利用前端界面对当前占位符中的图片src对应的图像信息进行显示，完成图片轮播。

对于本申请提供的设备的介绍请参照上述方法实施例，本申请在此不做赘述。

为解决上述问题，本申请还提供了一种计算机可读存储介质，该计算机可读存储介质上存储有计算机程序，计算机程序被处理器执行时可实现如下骤：

当接收到图片轮播指令时，根据图片轮播指令确定轮播方向；当轮播方向为向后轮播时，获取当前占位符的后侧相邻占位符中的图片src，并将后侧相邻占位符中的图片src转移至当前占位符中；当轮播方向为向前轮播时，获取当前占位符的前侧相邻占位符中的图片src，并将前侧相邻占位符中的图片src转移至当前占位符中；利用前端界面对当前占位符中的图片src对应的图像信息进行显示，完成图片轮播。

该计算机可读存储介质可以包括：u盘、移动硬盘、只读存储器(read-onlymemory，rom)、随机存取存储器(randomaccessmemory，ram)、磁碟或者光盘等各种可以存储程序代码的介质。

对于本申请提供的计算机可读存储介质的介绍请参照上述方法实施例，本申请在此不做赘述。

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

专业人员还可以进一步意识到，结合本文中所公开的实施例描述的各示例的单元及算法步骤，能够以电子硬件、计算机软件或者二者的结合来实现，为了清楚地说明硬件和软件的可互换性，在上述说明中已经按照功能一般性地描述了各示例的组成及步骤。这些功能究竟以硬件还是软件方式来执行，取决于技术方案的特定应用和设计约束条件。专业技术人员可以对每个特定的应用来使用不同方法来实现所描述的功能，但是这种实现不应认为超出本申请的范围。

结合本文中所公开的实施例描述的方法或算法的步骤可以直接用硬件、处理器执行的软件模块，或者二者的结合来实施。软件模块可以置于随机存储器(ram)、内存、只读存储器(rom)、电可编程rom、电可擦除可编程rom、寄存器、硬盘、可移动磁盘、cd-rom、或技术领域内所公知的任意其它形式的存储介质中。

以上对本申请所提供的图片轮播方法、装置、设备以及计算机可读存储介质进行了详细介绍。本文中应用了具体个例对本申请的原理及实施方式进行了阐述，以上实施例的说明只是用于帮助理解本申请的方法及其核心思想。应当指出，对于本技术领域的普通技术人员来说，在不脱离本申请原理的前提下，还可以对本申请进行若干改进和修饰，这些改进和修饰也落入本申请权利要求的保护范围要素。