CN107885814A - 显示轮播图的方法和装置 - Google Patents

Abstract

提供了一种显示轮播图的方法和装置。所述方法可包括：确定显示模式，并按照确定的显示模式显示包括多张图片的轮播图；当接收到针对触发对象的预定输入时，启动计时器；当计时器的时间达到第一预定时间时，将轮播图的图片切换到与所述预定输入所针对的触发对象对应的图片。所述方法和装置可防止或避免轮播图的图片闪速切换的技术问题。

Description

显示轮播图的方法和装置

技术领域

本发明涉及图片显示技术领域，更具体地，涉及一种显示轮播图的方法和装置。

背景技术

轮播图通常涉及可轮换地显示的多张图片。轮播图通常设置在网页核心位置(例如，显眼位置)，用于对(例如，网页所属企业的)主推产品、热销产品等进行展示和推广，因此，轮播图对于网页甚至网页所述企业而言是重要的。

通常包含自动轮播和手动轮播两种轮播图显示模式。可采用层叠样式表3(CSS3，Cascading Style Sheets 3)技术来实现轮播图的图片切换效果，原理是改变图片的left属性值，从而实现简单的自动轮播。还可通过脚本语言(例如，JavaScript)的鼠标事件来实现手动轮播。

可通过点击轮播图的当前显示的图片来实现轮播图的顺序地布置的多个图片之中的顺序上相邻图片之间的切换。随着轮播图的使用的增加，对轮播图的显示或切换方式的要求也越来越多。一种显示轮播图的方式包括：为轮播图的图片设置对应文本(例如，以标题的形式显示的文本)，当鼠标停留在特定标题上时，显示或切换到轮播图中与所述特定标题对应的图片。

在这种方式下，当由于误操作等原因导致鼠标快速滑过分别与多个图片对应的多个标题时，可能会根据鼠标在所述多个标题上滑过的顺序在所述多个图片之间闪速切换，影响用户正常查看网页，降低了用户体验。

发明内容

本发明的示例性实施例在于提供一种显示轮播图的方法和装置，其能够解决现有技术中由于误操作等原因导致的多个图片之间闪速切换等问题。

根据本发明的示例性实施例，提供了一种显示轮播图的方法。所述方法可包括：确定显示模式，并按照确定的显示模式显示包括多张图片的轮播图；当接收到针对触发对象的预定输入时，启动计时器；当计时器的时间达到第一预定时间时，将轮播图的图片切换到与所述预定输入所针对的触发对象对应的图片。

可选地，所述方法还可包括：在显示模式为自动轮播时，当计时器的时间未达到第一预定时间或计时器的时间达到第一预定时间前所述预定输入被撤销时，继续进行自动轮播，其中，第一预定时间小于自动轮播显示模式下的图片轮播间隔时间。

可选地，所述方法还可包括：在显示模式为自动轮播时，当计时器的时间达到第一预定时间时，将自动轮播切换为手动轮播。

可选地，所述方法还可包括：在显示模式为手动轮播时，当所述预定输入被撤销时，重新启动计时器，并且当计时器的时间达到第二预定时间时，将手动轮播切换为自动轮播。

可选地，第二预定时间可小于第一预定时间。

可选地，在显示模式为自动轮播时，所述显示包括多张图片的轮播图的步骤可包括：按照预定顺序循环显示所述多张图片。

可选地，所述触发对象可包括以下项中的至少一项：文本、超链接、图标、以及缩略图。

可选地，所述预定输入可包括以下项中的至少一项：鼠标经过、扫动、停留、以及悬停。

根据本发明的示例性实施例，提供了一种显示轮播图的装置。所述装置可包括：显示单元、输入单元和处理器，其中，处理器控制如下操作：确定显示模式，并按照确定的显示模式在显示单元上显示包括多张图片的轮播图；当通过输入单元接收到针对触发对象的预定输入时，启动计时器；当计时器的时间达到第一预定时间时，将显示单元上显示的轮播图的图片切换到与所述预定输入所针对的触发对象对应的图片。

可选地，处理器还可控制如下操作：在显示模式为自动轮播时，当计时器的时间未达到第一预定时间或计时器的时间达到第一预定时间前所述预定输入被撤销时，继续进行自动轮播，其中，第一预定时间小于自动轮播显示模式下的图片轮播间隔时间。

可选地，处理器还可控制如下操作：在显示模式为自动轮播时，当计时器的时间达到第一预定时间时，将自动轮播切换为手动轮播。

可选地，处理器还可控制如下操作：在显示模式为手动轮播时，当所述预定输入被撤销时，重新启动计时器，并且当计时器的时间达到第二预定时间时，将手动轮播切换为自动轮播。

可选地，第二预定时间可小于第一预定时间。

可选地，在显示模式为自动轮播时，处理器可执行控制以按照预定顺序在显示单元上循环显示所述多张图片。

根据本发明的示例性实施例，提供了一种计算机可读存储介质，存储有程序，其中，所述程序可包括执行上述方法的代码。

根据本发明的实施例的方法和装置，在接收到预定输入并启动计时器的情况下，当计时器的时间未达到第一预定时间或计时器的时间达到第一预定时间前所述预定输入被撤销时，可不改变轮播图的显示；当计时器的时间达到第一预定时间时，可改变轮播图的显示。例如，在未满足特定条件时，不从自动轮播切换到手动轮播，不将当前显示的图片切换为与所述预定输入所针对的触发对象相对应的图片；在满足特定条件时，从自动轮播切换到手动轮播，将轮播图的图片切换到与所述预定输入所针对的触发对象对应的图片。在这种情况下，例如，使鼠标停留在指定对象上达到第一预定时间时，才会切换到对应图片上，若达不到第一预定时间，则不会切换，可防止或避免误操作(例如，鼠标无意地经过特定标题)引起的图片闪速切换、图片抖动等问题。

将在接下来的描述中部分阐述本发明总体构思另外的方面和/或优点，还有一部分通过描述将是清楚的，或者可以经过本发明总体构思的实施而得知。

附图说明

通过下面结合示例性地示出实施例的附图进行的描述，本发明示例性实施例的上述和其他目的和特点将会变得更加清楚，其中：

图1是示出根据本发明的示例性实施例的显示轮播图的方法的流程图；

图2是示出根据本发明的示例性实施例的包括轮播图的一部分网页的示例的示图；

图3是示出根据本发明的示例性实施例的显示轮播图的装置的框图；

图4是示出根据本发明的示例性实施例的显示轮播图的方法的示例的流程图。

具体实施方式

现将详细参照本发明的实施例，所述实施例的示例在附图中示出，其中，相同的标号始终指的是相同的部件。以下将通过参照附图来说明所述实施例，以便解释本发明。

图1是示出根据本发明的示例性实施例的显示轮播图的方法的流程图。

如图1中所示，在步骤S110，确定显示模式，并按照确定的显示模式显示包括多张图片的轮播图。显示模式可包括但不限于自动轮播和手动轮播。例如，可在网页中设置第一区域，以用于显示轮播图。可在第一区域中显示轮播图中所包括的多张图片中的一张图片，隐藏其它图片。在预定时间(例如，图片轮播间隔时间)经过或执行预设操作后可将显示的图片替换为另一图片。

本发明的轮播图在网页中的显示模式不限于以上描述的模式，本领域中，在网页中使多张图片交替地显示的模式均可用于展示轮播图。例如，可设置位置上连续的第二区域、第三区域和第四区域，其中，第三区域的面积大于第二区域或第四区域。可在第二区域、第三区域和第四区域中分别显示轮播图的多张图片之中需要顺序地显示的三张图片。

在以下实施例中，以在第一区域中显示轮播图的显示模式为例进行说明，即第一区域中一次仅显示轮播图的一张图片，轮播图的其它图片隐藏。例如，可通过特定网页代码显示如图2中所示的轮播图。

如图2中所示，可在图片显示区域中显示包括6张图片的轮播图。例如，在图片显示区域中显示默认的图片，隐藏其余5张图片。这6张图片分别对应6种标题，即标题1至标题6。可执行针对标题1至标题6中的任意一个标题的输入，在执行了上述输入后可显示与标题对应的图片。

作为示例，可进行自动轮播。在自动轮播的方式下，按照预定顺序循环显示多张图片。可设置切换或替换图片的时间间隔(也可称为图片轮播间隔)以及默认显示的第一张图片。可通过脚本语言JavaScript的setInterval函数(间隔定时器函数)来控制(例如，设置或改变)图片轮播间隔。例如，可利用setInterval函数设置图片的展示/显示时间，当图片的展示/显示时间达到预定时间时自动显示下一张图片。

作为示例，可进行手动轮播。在手动轮播的方式下，根据用户的输入显示与输入对应的图片，其它图片隐藏。

当然，也可采用自动轮播和手动轮播组合的显示方式。也就是说，在未接收到用于进行手动轮播的输入时，执行自动轮播；在接收到用于进行手动轮播的输入时，切换为手动轮播，这将在下文中描述。

在步骤S120，当接收到针对触发对象的预定输入时，启动计时器。触发对象与所述多张图片中的至少一张图片对应。作为示例，所述触发对象可包括以下项中的至少一项：文本、超链接、图标、以及缩略图。作为示例，所述预定输入可包括以下项中的至少一项：鼠标经过、扫动、停留、以及悬停。

计时器可以是延时计时器。该计时器可设置所述预定输入的持续时间。例如，当鼠标经过网页中显示为超链接的标题时，启动定时器。在这种情况下，可停止或暂停自动轮播。

作为示例，当接收到针对触发对象的预定输入时，可改变预定输入所针对的触发对象的显示特征(例如，亮度、颜色等)。作为示例，当接收到针对触发对象的预定输入时，可显示与所述触发对象对应的图片的缩略图，也可显示与触发对象以及触发对象的相邻对象对应的图片的缩略图。当触发对象也是缩略图时，通过预定输入的触发而显示的缩略图比作为触发对象的缩略图大。当通过预定输入的触发而显示缩略图时，可保持该缩略图的显示，并且暂停自动轮播。可在接收到针对该缩略图的又一输入时切换到与该缩略图对应的图片，从而便于用户选择性地切换图片。所述又一输入包括以下项中的至少一项：点击、双击、以及扫动。

作为示例，所述至少一张图片是运动图片(例如，gif图片)。在这种情况下，可截取运动图片中的一帧画面。上文所述的缩略图可对应于所截取的画面。当接收到针对触发对象的预定输入时，可将轮播图中当前显示的运动图片替换为从该运动图片截取的一帧画面，并且在该预定输入保持了预定时间时，显示与该预定输入针对的触发对象对应的运动图片或静止图片。

在步骤S130，当计时器的时间达到第一预定时间时，将轮播图的图片切换到与所述预定输入所针对的触发对象对应的图片。例如，第一预定时间可以是500ms。在这种情况下，实现了手动轮播。

作为示例，所述方法还可包括：在显示模式为自动轮播时，当计时器的时间未达到第一预定时间或计时器的时间达到第一预定时间前所述预定输入被撤销时，继续进行自动轮播，其中，第一预定时间小于自动轮播显示模式下的图片轮播间隔时间。也就是说，在未满足条件时，不从自动轮播切换到手动轮播，即不将当前显示的图片切换为与所述预定输入所针对的触发对象相对应的图片。在这种情况下，可防止或避免误操作(例如，鼠标无意地经过特定标题)引起的图片闪速切换、图片抖动等问题。

作为示例，所述方法还可包括：在显示模式为自动轮播时，当计时器的时间达到第一预定时间时，将自动轮播切换为手动轮播，也可停止或暂停自动轮播，直到所述预定输入被撤销为止。在本示例中，轮播图的显示可通过用户的操作来控制，从而可提高操作的灵活和可控性。

作为示例，在显示模式为手动轮播时，当所述预定输入被撤销时，重新启动计时器，并且当计时器的时间达到第二预定时间时，将手动轮播切换为自动轮播。

在本实施例中，不仅防止或避免了误操作等引起的图片闪速切换、图片抖动等问题，实现了轮播图的显示模式之间的自动无缝切换，提高了用户体验。

图3是示出根据本发明的示例性实施例的显示轮播图的装置的框图。

如图3所示，显示轮播图的装置300包括包括：显示单元310、输入单元320和处理器330。显示单元310可显示包括多张图片的轮播图，并且还可显示与所述多张图片中的至少一张图片对应的触发对象。输入单元320接收针对触发对象的输入。处理器330控制如下操作：确定显示模式，并按照确定的显示模式在显示单元310上显示包括多张图片的轮播图；当通过输入单元320接收到针对触发对象的预定输入时，启动计时器；当计时器的时间达到第一预定时间时，将显示单元310上显示的轮播图的图片切换到与所述预定输入所针对的触发对象对应的图片。在显示模式为自动轮播时，处理器330执行控制以按照预定顺序在显示单元310上循环显示所述多张图片。

作为示例，处理器330还控制如下操作：在显示模式为自动轮播时，当计时器的时间未达到第一预定时间或计时器的时间达到第一预定时间前所述预定输入被撤销时，继续进行自动轮播，其中，第一预定时间小于自动轮播显示模式下的图片轮播间隔时间。

作为示例，处理器330还控制如下操作：在显示模式为自动轮播时，当计时器的时间达到第一预定时间时，将自动轮播切换为手动轮播。处理器330还控制如下操作：在显示模式为手动轮播时，当所述预定输入被撤销时，重新启动计时器，并且当计时器的时间达到第二预定时间时，将手动轮播切换为自动轮播。第二预定时间可小于第一预定时间。由此在处理器330的控制下，实现了自动轮播和手动轮播之间的转换，这仅仅是示例。例如，上述操作可由独立于处理器330的处理器(未示出)来实现。

图4是示出根据本发明的示例性实施例的显示轮播图的方法的示例的流程图。

如图4中所示，在操作S410，进行初始化。可默认显示第一张图片(如“1.jpg”)，除了“1.jpg”以外的图片隐藏。可为每张图片设置索引值，以用于图片切换。例如，可自定义用于显示第i张图片和第i种标题的函数banner(i)，其中，i为从0至5的整数，一个i值对应于一张图片和一种标题。在这种情况下，在步骤S410中可执行banner(0)。

在步骤S420，进行自动轮播。可设置用于自动轮播的计时器(或称为定时器)banner_auto，以及用于控制自动轮播的间隔时间的函数setInterval。在这种情况下，在逐渐增加i值的情况下执行banner(0)至banner(5)，当banner(i)的i值大于5时，将i置为0，执行banner(0)，然后继续增加i值以执行banner(i)，从而循环地进行自动轮播。

在步骤S430，判断是否执行了特定输入，例如，执行针对标题i(例如，i是3)的鼠标停留操作，如果是，则执行步骤S440，否则执行步骤S420以继续进行自动轮播。

在步骤S440，暂停自动轮播并启动计时器(例如，延时定时器或延时计时器)banner_manu。在这种情况下，可清除计时器banner_auto记录的时间。

在步骤S450，对计时器banner_manu记录的时间和上述特定输入的状态进行判断，当计时器banner_manu的时间达到或超过预定时间并且所述特定输入仍被保持时，进行步骤S470，否则，执行步骤S460以清除计时器banner_manu记录的时间并且随后进行步骤S420。上述操作可借助于JavaScript的延时函数setTimeout来实现。

在步骤S470，进行图片跳转，从而显示与鼠标停留的标题3对应的图片。在这种情况下，当鼠标停留在标题3上时不立即进行图片跳转，而是延时一段时间之后再跳转到与标题3对应图片。具体延时时间可根据需求来设置，根据一般的操作习惯和视觉感知时间，可将延时时间设置为500ms。

如上所述，当鼠标快速滑过特定标题，尤其是连续划过多个标题(例如，标题1至标题6)时，由于在单个标题上停留时间极短(即，未超过设置的延时时间)，在还没有执行向对应图片的跳转时，鼠标就已经离开相应的标题，因此不会跳转到对应的图片。例如，当鼠标快速地依次经过标题1、标题2、标题3、标题4、标题5并最终停留在标题6时，轮播图不会从图片1至图片5闪速地切换，而是执行一次切换操作以切换至图片6。在这种情况下，减少或避免了图片闪速切换的问题。

应该理解，上述方法和装置中都出现的名词或语句的含义相同或相似，如其含义已在方法或装置部分进行了详述，则在对应的部分就不再赘述。

此外，根据本发明的示例性实施例的各种方法可以被实现为机器(例如，计算机)可读程序。所述程序可存储在机器(例如，计算机)可读存储介质中，当所述程序被计算机执行时，可实现上述方法。

此外，根据本发明的示例性实施例的各个单元可被实现硬件组件。本领域技术人员根据限定的各个单元所执行的处理，可以例如使用现场可编程门阵列(FPGA)或专用集成电路(ASIC)来实现各个单元。

虽然已表示和描述了本发明的一些示例性实施例，但本领域技术人员应该理解，在不脱离由权利要求及其等同物限定其范围的本发明的原理和精神的情况下，可以对这些实施例进行修改。

Claims (15)

1.一种显示轮播图的方法，包括：

确定显示模式，并按照确定的显示模式显示包括多张图片的轮播图；

当接收到针对触发对象的预定输入时，启动计时器；

当计时器的时间达到第一预定时间时，将轮播图的图片切换到与所述预定输入所针对的触发对象对应的图片。

2.如权利要求1所述的方法，还包括：在显示模式为自动轮播时，当计时器的时间未达到第一预定时间或计时器的时间达到第一预定时间前所述预定输入被撤销时，继续进行自动轮播，其中，第一预定时间小于自动轮播显示模式下的图片轮播间隔时间。

3.如权利要求1所述的方法，还包括：在显示模式为自动轮播时，当计时器的时间达到第一预定时间时，将自动轮播切换为手动轮播。

4.如权利要求1或3所述的方法，还包括：在显示模式为手动轮播时，当所述预定输入被撤销时，重新启动计时器，并且当计时器的时间达到第二预定时间时，将手动轮播切换为自动轮播。

5.如权利要求4所述的方法，其中，第二预定时间小于第一预定时间。

6.如权利要求1所述的方法，其中，在显示模式为自动轮播时，所述显示包括多张图片的轮播图的步骤包括：按照预定顺序循环显示所述多张图片。

7.如权利要求1所述的方法，其中，所述触发对象包括以下项中的至少一项：文本、超链接、图标、以及缩略图。

8.如权利要求1所述的方法，其中，所述预定输入包括以下项中的至少一项：鼠标经过、扫动、停留、以及悬停。

9.一种显示轮播图的装置，包括：显示单元、输入单元和处理器，其中，处理器控制如下操作：

确定显示模式，并按照确定的显示模式在显示单元上显示包括多张图片的轮播图；

当通过输入单元接收到针对触发对象的预定输入时，启动计时器；

当计时器的时间达到第一预定时间时，将显示单元上显示的轮播图的图片切换到与所述预定输入所针对的触发对象对应的图片。

10.如权利要求9所述的装置，其中，处理器还控制如下操作：在显示模式为自动轮播时，当计时器的时间未达到第一预定时间或计时器的时间达到第一预定时间前所述预定输入被撤销时，继续进行自动轮播，其中，第一预定时间小于自动轮播显示模式下的图片轮播间隔时间。

11.如权利要求9所述的装置，其中，处理器还控制如下操作：在显示模式为自动轮播时，当计时器的时间达到第一预定时间时，将自动轮播切换为手动轮播。

12.如权利要求9或11所述的装置，其中，处理器还控制如下操作：在显示模式为手动轮播时，当所述预定输入被撤销时，重新启动计时器，并且当计时器的时间达到第二预定时间时，将手动轮播切换为自动轮播。

13.如权利要求12所述的装置，其中，第二预定时间小于第一预定时间。

14.如权利要求9所述的装置，其中，在显示模式为自动轮播时，处理器执行控制以按照预定顺序在显示单元上循环显示所述多张图片。

15.一种计算机可读存储介质，存储有程序，其特征在于，所述程序包括执行如权利要求1-8中任一项所述的方法的代码。