CN111428065A - 一种图片轮播方法、装置和设备 - Google Patents

Abstract

一种图片轮播方法、装置和设备，其中，所述方法包括：在轮播展示区展示第一图片时，根据轮播方向和图片列表，在所述轮播展示区的相邻区域绘制待展示的第二图片；按照所述轮播方向，移动所述第二图片至轮播展示区进行展示。通过本申请实施例实现了无缝轮播，提升了用户体验。

Description

一种图片轮播方法、装置和设备

技术领域

本文涉及多媒体技术领域，尤指一种图片轮播方法、装置、设备和计算机可读存储介质。

背景技术

图片轮播是在显示界面的某个位置轮流显示预设图片的一种技术。通过图片轮播可以使得显示界面自动或手动滚动展示多个图片，便于用户查看，多用于产品推广、信息宣传，是一种展示信息的方式。

目前一些实现图片轮播的方法是：将所有待展示的图片按顺序排成一排绘制出来，轮播展示区仅展示其中的一张。当需要播放下一个图片时，将图片序列整体进行移动，达到轮播的效果。

但是，这种图片轮播的方式属于伪无缝轮播，因为在图片序列展示到最后一张图片之后，当需要返回播放第一张图片时，需要迅速移动图片序列以展示第一张图片。例如，如图1所示，假设一共有5幅图片，初始情况下，先展示图片1，然后图片序列整体向左移动，则展示图片2，以此类推，展示到图片5时，图片序列只能迅速向右移动，以从头开始展示。但是，从展示图片5到展示图片1这个过程与前面从图片1～图片5轮播展示的过程不同，使得画面有一种拉扯的效果，没有达到无缝轮播，用户体验较差。

发明内容

本申请提供了一种图片轮播方法、装置、设备和计算机可读存储介质，以实现无缝轮播，提升用户体验。

本申请实施例提供了一种图片轮播方法，包括：

在轮播展示区展示第一图片时，根据轮播方向和图片列表，在所述轮播展示区的相邻区域绘制待展示的第二图片；

按照所述轮播方向，移动所述第二图片至轮播展示区进行展示。

本申请实施例还提供一种图片轮播装置，包括：

准备模块，用于在轮播展示区展示第一图片时，根据轮播方向和图片列表，在所述轮播展示区的相邻区域绘制待展示的第二图片；

移动模块，用于按照所述轮播方向，移动所述第二图片至轮播展示区进行展示。

本申请实施例还提供一种图片轮播设备，包括：存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，所述处理器执行所述程序时实现所述图片轮播方法。

本申请实施例还提供一种计算机可读存储介质，存储有计算机可执行指令，所述计算机可执行指令用于执行所述图片轮播方法。

与相关技术相比，本申请实施例包括：在轮播展示区展示第一图片时，根据轮播方向和图片列表，在所述轮播展示区的相邻区域绘制待展示的第二图片；按照所述轮播方向，移动所述第二图片至轮播展示区进行展示。本申请实施例通过在轮播过程中，循环执行：展示图片-绘制待展示图片-移动待展示图片进展示区，避免了从图片列表末尾轮播到图片列表头部时出现的拉扯现象，实现了无缝轮播，提升了用户体验。

本申请的其它特征和优点将在随后的说明书中阐述，并且，部分地从说明书中变得显而易见，或者通过实施本申请而了解。本申请的其他优点可通过在说明书以及附图中所描述的方案来实现和获得。

附图说明

附图用来提供对本申请技术方案的理解，并且构成说明书的一部分，与本申请的实施例一起用于解释本申请的技术方案，并不构成对本申请技术方案的限制。

图1为相关技术图片轮播的示例；

图2为本申请实施例的图片轮播方法的流程图；

图3为本申请实施例的步骤101的流程图；

图4为本申请应用实例一的示意图；

图5为本申请应用实例二的示意图；

图6为本申请应用实例三的示意图；

图7为本申请实施例的图片轮播装置的示意图。

具体实施方式

本申请描述了多个实施例，但是该描述是示例性的，而不是限制性的，并且对于本领域的普通技术人员来说显而易见的是，在本申请所描述的实施例包含的范围内可以有更多的实施例和实现方案。尽管在附图中示出了许多可能的特征组合，并在具体实施方式中进行了讨论，但是所公开的特征的许多其它组合方式也是可能的。除非特意加以限制的情况以外，任何实施例的任何特征或元件可以与任何其它实施例中的任何其他特征或元件结合使用，或可以替代任何其它实施例中的任何其他特征或元件。

本申请包括并设想了与本领域普通技术人员已知的特征和元件的组合。本申请已经公开的实施例、特征和元件也可以与任何常规特征或元件组合，以形成由权利要求限定的独特的发明方案。任何实施例的任何特征或元件也可以与来自其它发明方案的特征或元件组合，以形成另一个由权利要求限定的独特的发明方案。因此，应当理解，在本申请中示出和/或讨论的任何特征可以单独地或以任何适当的组合来实现。因此，除了根据所附权利要求及其等同替换所做的限制以外，实施例不受其它限制。此外，可以在所附权利要求的保护范围内进行各种修改和改变。

此外，在描述具有代表性的实施例时，说明书可能已经将方法和/或过程呈现为特定的步骤序列。然而，在该方法或过程不依赖于本文所述步骤的特定顺序的程度上，该方法或过程不应限于所述的特定顺序的步骤。如本领域普通技术人员将理解的，其它的步骤顺序也是可能的。因此，说明书中阐述的步骤的特定顺序不应被解释为对权利要求的限制。此外，针对该方法和/或过程的权利要求不应限于按照所写顺序执行它们的步骤，本领域技术人员可以容易地理解，这些顺序可以变化，并且仍然保持在本申请实施例的精神和范围内。

如图2所示，本申请实施例提供一种图片轮播方法，包括：

步骤101，在轮播展示区展示第一图片时，根据轮播方向和图片列表，在所述轮播展示区的相邻区域绘制待展示的第二图片。

其中，所述轮播展示区为在显示界面中展示轮播图片的区域，例如在某个网站的首页，设置一个或多个轮播展示区用于展示新闻或产品等。所述轮播展示区的大小通常与需要展示的图片大小相同。

所述轮播方向可以根据情况进行设置，例如左右轮播或上下轮播，在实际应用中，左右轮播使用更为广泛，即从左向右轮播或从右向左轮播。

所述图片列表中包含需要展示的图片，可以根据实际情况进行设置。

所述轮播展示区的相邻区域为紧挨所述轮播展示区的区域，所述相邻区域的大小与所述轮播展示区大小相同，在所述轮播方向为左右轮播时，所述相邻区域为所述轮播展示区的左侧或右侧，在所述轮播方向为上下轮播时，所述相邻区域为所述轮播展示区的上侧或下侧。

步骤102，按照所述轮播方向，移动所述第二图片至轮播展示区进行展示。

需要说明的是，本申请实施例中第一图片和第二图片中的第一、第二只是为了便于说明，并不指代图片列表中的图片的顺序，在步骤101中，第一图片为当前展示的图片，第二图片为待展示的图片。在步骤102中，第一图片移动到隐藏的区域，第二图片移动到展示区域，则第二图片成为当前展示的图片，也即第二图片从待展示的图片转换为展示的图片(即转换为第一图片)。

由于本申请实施例的执行过程是循环进行的，当第二图片从待展示的图片转换为展示的图片，则该图片转换为第一图片，下一张待展示的图片为第二图片，以此类推。

本申请实施例通过在轮播过程中，循环执行：展示图片-绘制待展示图片-移动待展示图片进展示区，避免了从图片列表末尾轮播到图片列表头部时出现的拉扯现象，实现了无缝轮播，提升了用户体验。

如图3所示，在一实施例中，根据轮播方向和图片列表，在所述轮播展示区的相邻区域绘制待展示的第二图片，包括：

步骤201，根据轮播模式确定轮播方向。

其中，轮播模式可以包括如下至少之一：自动轮播、手动选择轮播方向、手动选择轮播图片序号。

下面分别进行阐述：

(1)自动轮播模式

自动轮播模式是指按照预设的轮播方向和轮播速度，按顺序自动播放图片列表中的图片，类似走马灯的效果。

本实施例中，所述轮播模式为自动轮播，确定所述轮播方向为默认轮播方向。例如，默认轮播方向为从右向左轮播。

(2)手动选择轮播方向模式

手动选择轮播方向模式是指根据按键消息对应的选择方向指令(例如，向左播放或向右播放)，按顺序播放图片列表中的图片。例如，用户按一下向左播放按钮，则从右向左轮播一幅图片；用户按一下向右播放按钮，则从左向右轮播一幅图片。

本实施例中，所述轮播模式为手动选择轮播方向，根据接收到的选择方向指令确定所述轮播方向。

其中，所述轮播方向为所述选择方向指令对应的方向。

例如，当接收到用户向左播放指令，则对应轮播方向为从右向左轮播；当接收到用户向右播放指令，则对应轮播方向为从左向右轮播。

(3)手动选择轮播图片序号模式

手动选择轮播图片序号模式是指根据手动选择轮播图片序号，播放对应的图片。例如当前展示图片为图片2，当手动选择图片序号为6时，将图片2移动，从而展示图片6。

所述轮播模式为手动选择轮播图片序号，根据所述第一图片的序号和手动选择的轮播图片序号的排列顺序确定所述轮播方向。

其中，可以设置为：当所述手动选择的轮播图片序号在所述第一图片的序号之后时，确定轮播方向为默认的轮播方向；当所述手动选择的轮播图片序号在所述第一图片的序号之前时，确定轮播方向为默认的轮播方向的反方向。

例如，当前展示图片为图片2，当手动选择图片序号为6时，轮播方向为从右向左轮播；当前展示图片为图片5，当手动选择图片序号为1时，轮播方向为从左向右轮播。

步骤202，根据所述轮播模式确定所述图片列表中待展示的第二图片。

其中，可以根据如下三种情况确定待展示的第二图片：

(1)所述轮播模式为自动轮播，或所述轮播模式为手动选择轮播方向且所选择的轮播方向为默认轮播方向时：

若所述第一图片是所述图片列表中的最后一张图片，则所述第二图片为所述图片列表中的第一张图片；若所述第一图片不是所述图片列表中的最后一张图片，则所述第二图片为所述图片列表中所述第一图片的后面一张图片。

例如，默认轮播方向为从右向左轮播，所述图片列表中共有6张图片，若第一图片为图片6，则第二图片为图片1；若第一图片为除图片6之外的图片时，如第一图片为图片3，则第二图片为图片4。

(2)所述轮播模式为手动选择轮播方向且所选择的所述轮播方向为默认轮播方向的反方向时：

若所述第一图片是所述图片列表中的第一张图片，则所述第二图片为所述图片列表中的最后一张图片；若所述第一图片不是所述图片列表中的第一张图片，则所述第二图片为所述图片列表中所述第一图片的前面一张图片。

例如，默认轮播方向为从右向左轮播，则反方向为从左向右轮播，所述图片列表中共有6张图片，若第一图片为图片1，则第二图片为图片6；若第一图片为除图片1之外的图片时，如第一图片为图片3，则第二图片为图片2。

(3)所述轮播模式为手动选择轮播图片序号时：

所述第二图片为所述图片列表中手动选择的轮播图片序号对应的图片。例如，当手动选择图片序号为6时，则第二图片为图片6。

当采用相关技术的图片序列整体移动方式中，手动选择轮播图片序号时也会展示当前展示图片和所选择的图片之间的图片，例如，当前展示图片为图片2，当手动选择图片序号为6时，由于是整体移动，则用户会看到图片3、4、5闪过，然后才能看到图片6。这种情况下，用户体验也比较差。而采用本申请实施例的方法，用户不会看到图片3～5，看到的效果是图片2移走，展示出图片6，这样也体现了无缝轮播，提升了用户体验。

步骤203，在所述轮播展示区的相邻区域绘制待展示的第二图片，其中，所述相邻区域位于所述轮播展示区与所述轮播方向的反方向的一侧。

例如，轮播方向为从右向左轮播，则所述相邻区域位于所述轮播展示区的右侧；轮播方向为从左向右轮播，则所述相邻区域位于所述轮播展示区的左侧。

所述轮播展示区的相邻区域为隐藏状态，所以用户看不到位于该相邻区域的图片。

在一实施例中，步骤102之后，所述方法还包括：

删除已移动到所述轮播展示区之外的所述第一图片。

也就是说，当所述第一图片移动到所述轮播展示区之外，则进行删除。这样，通常情况下，在画布上最多只存在两幅图片。

在一实施例中，所述方法基于面向对象封装方式实现。通过用面向对象方法封装，可以采用组件调用的方式使用，以利于其他人应用本方法。

在一实施例中，所述方法还包括：预先设置如下参数中的至少之一：

所述轮播展示区的位置；

所述图片列表中包含的图片；

轮播的速度；

手动选择轮播方向的按钮样式；

手动选择轮播图片序号的按钮样式。

其中，基于面向对象方法封装，可以方便地设置上述参数。

例如：

代码如下：

下面通过应用实例进行说明。

假设图片列表中有5张图片，默认的轮播方向为从右向左轮播。

应用实例一，自动轮播模式

如图4所示，在自动轮播模式下，初始时展示图片1(即第一图片)，在轮播展示区的右侧绘制图片2(即第二图片)，轮播过程中，图片1和图片2同时向左移动，则图片2展示出来，图片1隐藏并被删除，此时，第一图片变成图片2，第二图片为图片3，以此类推，当第一图片为图片列表中的最后一张图片即图片5，则第二图片为图片列表中的第一张图片即图片1。

应用实例二，手动选择轮播方向模式

如图5所示，在手动选择轮播方向模式下，假设当前展示的图片为图片5，若手动选择的轮播方向为从右向左轮播，则在轮播展示区的右侧绘制图片1，向左移动图片5和图片1，展示图片1，删除图片5。若手动选择的轮播方向为从左向右轮播，则在轮播展示区的左侧绘制图片4，向右移动图片5和图片4，展示图片4，删除图片5。

应用实例三，手动选择轮播图片序号模式

如图6所示，在手动选择轮播图片序号模式下，假设当前展示的图片为图片2，若手动选择的轮播图片序号为5，轮播方向为从右向左轮播，在轮播展示区的右侧绘制图片5，向左移动图片5和图片2，展示图片5，删除图片2。

从上述应用实例可以看出，由于本申请实施例没有采用传统的将图片序列排成一排来回拉动，而是每次绘制待展示的图片，再进行移动，从而可以实现无缝的效果。

如图7所示，本申请实施例还提供一种图片轮播装置，包括：

准备模块31，用于在轮播展示区展示第一图片时，根据轮播方向和图片列表，在所述轮播展示区的相邻区域绘制待展示的第二图片；

移动模块32，用于按照所述轮播方向，移动所述第二图片至轮播展示区进行展示。

本申请实施例通过在轮播过程中，循环执行：展示图片-绘制待展示图片-移动待展示图片进展示区，实现了无缝轮播，提升了用户体验。

在一实施例中，所述装置还包括：

删除模块，用于删除已移动到所述轮播展示区之外的所述第一图片。

在一实施例中，所述准备模块31，用于：

根据轮播模式确定轮播方向；

根据所述轮播模式确定所述图片列表中待展示的第二图片；

在所述轮播展示区的相邻区域绘制待展示的第二图片，其中，所述相邻区域位于所述轮播展示区与所述轮播方向的反方向的一侧。

在一实施例中，所述准备模块31，用于：

采用如下至少之一的方式根据轮播模式确定轮播方向：

所述轮播模式为自动轮播，确定所述轮播方向为默认轮播方向；

所述轮播模式为手动选择轮播方向，根据接收到的选择方向指令确定所述轮播方向；

所述轮播模式为手动选择轮播图片序号，根据所述第一图片的序号和手动选择的轮播图片序号的排列顺序确定所述轮播方向。

在一实施例中，所述准备模块31，用于：

采用如下至少之一的方式根据所述轮播模式确定所述图片列表中待展示的第二图片：

所述轮播模式为自动轮播，或所述轮播模式为手动选择轮播方向且所选择的轮播方向为默认轮播方向时：若所述第一图片是所述图片列表中的最后一张图片，则所述第二图片为所述图片列表中的第一张图片；若所述第一图片不是所述图片列表中的最后一张图片，则所述第二图片为所述图片列表中所述第一图片的后面一张图片；

所述轮播模式为手动选择轮播方向且所选择的所述轮播方向为默认轮播方向的反方向时：若所述第一图片是所述图片列表中的第一张图片，则所述第二图片为所述图片列表中的最后一张图片；若所述第一图片不是所述图片列表中的第一张图片，则所述第二图片为所述图片列表中所述第一图片的前面一张图片；

所述轮播模式为手动选择轮播图片序号时：所述第二图片为所述图片列表中手动选择的轮播图片序号对应的图片。

所述装置还包括：

预设模块，用于预先设置如下参数中的至少之一：

所述轮播展示区的位置；

所述图片列表中包含的图片；

轮播的速度；

手动选择轮播方向的按钮样式；

手动选择轮播图片序号的按钮样式。

本申请实施例还提供一种图片轮播设备，包括：存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，所述处理器执行所述程序时实现所述图片轮播方法。

本申请实施例还提供一种计算机可读存储介质，存储有计算机可执行指令，所述计算机可执行指令用于执行所述图片轮播方法。

在本实施例中，上述存储介质可以包括但不限于：U盘、只读存储器(ROM，Read-Only Memory)、随机存取存储器(RAM，Random Access Memory)、移动硬盘、磁碟或者光盘等各种可以存储程序代码的介质。

本领域普通技术人员可以理解，上文中所公开方法中的全部或某些步骤、系统、装置中的功能模块/单元可以被实施为软件、固件、硬件及其适当的组合。在硬件实施方式中，在以上描述中提及的功能模块/单元之间的划分不一定对应于物理组件的划分；例如，一个物理组件可以具有多个功能，或者一个功能或步骤可以由若干物理组件合作执行。某些组件或所有组件可以被实施为由处理器，如数字信号处理器或微处理器执行的软件，或者被实施为硬件，或者被实施为集成电路，如专用集成电路。这样的软件可以分布在计算机可读介质上，计算机可读介质可以包括计算机存储介质(或非暂时性介质)和通信介质(或暂时性介质)。如本领域普通技术人员公知的，术语计算机存储介质包括在用于存储信息(诸如计算机可读指令、数据结构、程序模块或其他数据)的任何方法或技术中实施的易失性和非易失性、可移除和不可移除介质。计算机存储介质包括但不限于RAM、ROM、EEPROM、闪存或其他存储器技术、CD-ROM、数字多功能盘(DVD)或其他光盘存储、磁盒、磁带、磁盘存储或其他磁存储装置、或者可以用于存储期望的信息并且可以被计算机访问的任何其他的介质。此外，本领域普通技术人员公知的是，通信介质通常包含计算机可读指令、数据结构、程序模块或者诸如载波或其他传输机制之类的调制数据信号中的其他数据，并且可包括任何信息递送介质。

Claims (10)

1.一种图片轮播方法，包括：

在轮播展示区展示第一图片时，根据轮播方向和图片列表，在所述轮播展示区的相邻区域绘制待展示的第二图片；

按照所述轮播方向，移动所述第二图片至轮播展示区进行展示。

2.根据权利要求1所述的方法，其特征在于，所述按照所述轮播方向，移动所述第二图片至展示区进行展示之后，所述方法还包括：

删除已移动到所述轮播展示区之外的所述第一图片。

3.根据权利要求1或2所述的方法，其特征在于，所述根据轮播方向和图片列表，在所述轮播展示区的相邻区域绘制待展示的第二图片，包括：

根据轮播模式确定轮播方向；

根据所述轮播模式确定所述图片列表中待展示的第二图片；

在所述轮播展示区的相邻区域绘制待展示的第二图片，其中，所述相邻区域位于所述轮播展示区与所述轮播方向的反方向的一侧。

4.根据权利要求3所述的方法，其特征在于，所述根据轮播模式确定轮播方向，包括如下至少之一：

所述轮播模式为自动轮播，确定所述轮播方向为默认轮播方向；

所述轮播模式为手动选择轮播方向，根据接收到的选择方向指令确定所述轮播方向；

所述轮播模式为手动选择轮播图片序号，根据所述第一图片的序号和手动选择的轮播图片序号的排列顺序确定所述轮播方向。

5.根据权利要求3所述的方法，其特征在于，所述根据所述轮播模式确定所述图片列表中待展示的第二图片，包括如下至少之一：

所述轮播模式为自动轮播，或所述轮播模式为手动选择轮播方向且所选择的轮播方向为默认轮播方向时：若所述第一图片是所述图片列表中的最后一张图片，则所述第二图片为所述图片列表中的第一张图片；若所述第一图片不是所述图片列表中的最后一张图片，则所述第二图片为所述图片列表中所述第一图片的后面一张图片；

所述轮播模式为手动选择轮播方向且所选择的所述轮播方向为默认轮播方向的反方向时：若所述第一图片是所述图片列表中的第一张图片，则所述第二图片为所述图片列表中的最后一张图片；若所述第一图片不是所述图片列表中的第一张图片，则所述第二图片为所述图片列表中所述第一图片的前面一张图片；

所述轮播模式为手动选择轮播图片序号时：所述第二图片为所述图片列表中手动选择的轮播图片序号对应的图片。

6.根据权利要求1或2所述的方法，其特征在于，所述方法基于面向对象封装方式实现，所述方法还包括：预先设置如下参数中的至少之一：

所述轮播展示区的位置；

所述图片列表中包含的图片；

轮播的速度；

手动选择轮播方向的按钮样式；

手动选择轮播图片序号的按钮样式。

7.一种图片轮播装置，其特征在于，包括：

准备模块，用于在轮播展示区展示第一图片时，根据轮播方向和图片列表，在所述轮播展示区的相邻区域绘制待展示的第二图片；

移动模块，用于按照所述轮播方向，移动所述第二图片至轮播展示区进行展示。

8.根据权利要求7所述的装置，其特征在于，所述装置还包括：

删除模块，用于删除已移动到所述轮播展示区之外的所述第一图片。

9.一种图片轮播设备，包括：存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，其特征在于，所述处理器执行所述程序时实现如权利要求1～6中任意一项所述的方法。

10.一种计算机可读存储介质，存储有计算机可执行指令，所述计算机可执行指令用于执行权利要求1～6中任意一项所述的方法。

Images