CN110858154B - 一种轮播图的切换显示方法、装置、电子设备及存储介质 - Google Patents
一种轮播图的切换显示方法、装置、电子设备及存储介质 Download PDFInfo
- Publication number
- CN110858154B CN110858154B CN201810972994.1A CN201810972994A CN110858154B CN 110858154 B CN110858154 B CN 110858154B CN 201810972994 A CN201810972994 A CN 201810972994A CN 110858154 B CN110858154 B CN 110858154B
- Authority
- CN
- China
- Prior art keywords
- carousel
- area
- map
- attribute value
- sequence
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Active
Links
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F9/00—Arrangements for program control, e.g. control units
- G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
- G06F9/44—Arrangements for executing specific programs
- G06F9/451—Execution arrangements for user interfaces
Abstract
本发明实施例提供了一种轮播图的切换显示方法、装置、电子设备及存储介质,方法包括:在接收第一轮播图的显示指令后,根据显示指令,从等待显示的轮播图中确定第一轮播图;然后,根据第一轮播图和当前显示在客户端界面中的可视区域的第二轮播图的预定轮播顺序,修改第一轮播图和第二轮播图的定位属性值,以使第二轮播图沿与预定轮播顺序对应的方向逐渐滑出可视区域,第一轮播图沿与预定轮播顺序对应的方向跟随第二轮播图的滑出逐渐滑入可视区域。在这个过程中,不需要在可视区域很快滑动多张轮播图,切换效果优雅,不容易造成人眼的不适,从而可以提升用户体验。
Description
技术领域
本发明涉及互联网技术领域,特别是涉及一种轮播图的切换显示方法、装置、电子设备及存储介质。
背景技术
客户端的界面中,图片轮播是一种常用的图片显示方式。用于轮播的每一张图片称为轮播图,在图片轮播时,多张轮播图可按照预设的轮播顺序定时轮播显示在客户端的界面中,而在用户的操作干预下,亦可按照用户意愿,在客户端的界面中轮播显示用户指定的轮播图。
现有技术中,轮播图可以是滑动轮播的,假设N(N大于等于3)张轮播图进行轮播,N张轮播图按照预设的轮播顺序进行轮播显示。一般,首先在预定的轮播可视区域显示第1张轮播图,然后,第1张轮播图向左逐渐滑出可视区域,而第2张轮播图由右向左逐渐滑入可视区域,然后,第2张轮播图向左逐渐滑出可视区域,而第3张轮播图由右向左逐渐滑入可视区域,以此类推,直至第N张轮播图由右向左逐渐滑入可视区域,然后,从第1张开始周而复始轮播。
而在用户操作干预下,当用户选择需要显示的轮播图时,如果用户选择的轮播图在轮播顺序中是与当前显示的轮播图不相邻的轮播图时,则在滑动轮播时,可视区域中会滑动多张轮播图,举例而言,假设当前显示的轮播图为第1张轮播图,用户选择的轮播图为第4张轮播图,则,在进行滑动轮播时,第1张轮播图向左逐渐滑出可视区域,而第2张轮播图、第3张轮播图依次由右向左逐渐滑入又滑出可视区域,第4张轮播图由右向左逐渐滑入可视区域。由于响应用户的选择进行轮播图切换的速度需要很快,因此,可视区域中会很快滑动多张轮播图,这样切换轮播效果不够优雅,很容易造成人眼的不适,用户体验较差。
发明内容
本发明实施例的目的在于提供一种轮播图的切换显示方法、装置、电子设备及存储介质,以提升用户体验。具体技术方案如下:
第一方面,本发明实施例提供了一种轮播图的切换显示方法,所述方法应用于客户端,所述客户端的界面中包括用于显示所述轮播图的可视区域,各所述轮播图均设置有定位属性,所述定位属性用于定义所述轮播图在所述客户端界面的区域;
所述方法包括:
接收第一轮播图的显示指令;
根据所述显示指令,从等待显示的轮播图中确定所述第一轮播图;
根据所述第一轮播图和当前显示在所述客户端界面中的可视区域的第二轮播图的预定轮播顺序,修改所述第一轮播图和所述第二轮播图的定位属性值,以使所述第二轮播图沿与所述预定轮播顺序对应的方向逐渐滑出所述可视区域,所述第一轮播图沿与所述预定轮播顺序对应的方向跟随所述第二轮播图的滑出逐渐滑入所述可视区域。
可选的,所述客户端界面中提供有与每一所述轮播图对应的显示按钮;
所述接收第一轮播图的显示指令的步骤,包括:
接收用户通过点击所述第一轮播图对应的显示按钮下发的显示指令。
可选的,所述等待显示的轮播图的定位属性值相同,或者,每两张等待显示的轮播图的定位属性值的差值小于等于第一阈值。
可选的,所述预定轮播顺序为:所述第一轮播图位于所述第二轮播图之后;
所述预定轮播顺序对应的方向为:从右向左方向;
所述根据所述第一轮播图和当前显示在所述客户端界面中的可视区域的第二轮播图的预定轮播顺序,修改所述第一轮播图和所述第二轮播图的定位属性值,以使所述第二轮播图沿与所述预定轮播顺序对应的方向逐渐滑出所述可视区域,所述第一轮播图沿所述与所述预定轮播顺序对应的方向跟随所述第二轮播图的滑出逐渐滑入所述可视区域包括:
根据所述预定轮播顺序,将所述第二轮播图的定位属性值由可视区域属性值开始,逐渐递变修改为过渡区域属性值,将所述第一轮播图的定位属性值由等待区域属性值逐渐递变修改为所述可视区域属性值,使所述第二轮播图从右向左逐渐滑出所述可视区域,所述第一轮播图从右向左跟随所述第二轮播图的滑出逐渐滑入所述可视区域;
和/或
所述预定轮播顺序为:所述第一轮播图位于所述第二轮播图之前;
所述预定轮播顺序对应的方向为:从左向右方向;
所述根据所述第一轮播图和当前显示在所述客户端界面中的可视区域的第二轮播图的预定轮播顺序,修改所述第一轮播图和所述第二轮播图的定位属性值,以使所述第二轮播图沿与所述预定轮播顺序对应的方向逐渐滑出所述可视区域,所述第一轮播图沿所述与所述预定轮播顺序对应的方向跟随所述第二轮播图的滑出逐渐滑入所述可视区域包括:
根据所述预定轮播顺序,将所述第二轮播图的定位属性值由可视区域属性值,逐渐递变修改为等待区域属性值,将所述第一轮播图的定位属性值由等待区域属性值修改为过渡区域属性值后,再将所述第一轮播图的定位属性值由所述过渡区域属性值开始,逐渐递变修改为所述可视区域属性值,以使所述第二轮播图从左向右逐渐滑出所述可视区域,所述第一轮播图从左向右跟随所述第二轮播图的滑出逐渐滑入所述可视区域;
其中,所述等待区域位于所述可视区域的右侧,所述过渡区域位于所述可视区域的左侧。
可选的,在所述第二轮播图从右向左逐渐滑出所述可视区域后,所述方法还包括:将所述第二轮播图的定位属性值由所述过渡区域属性值修改为所述可视区域属性值。
可选的,所述方法还包括:
按照预先设定的轮播图轮播时间间隔,根据预先设定的轮播顺序,确定轮播显示的轮播图,所述轮播显示的轮播图为所述轮播顺序中与当前显示的轮播图相邻的下一张轮播图;
将所述当前显示的轮播图的定位属性值由所述可视区域的属性值开始,逐渐递变修改为过渡区域属性值,将所述轮播显示的轮播图的定位属性值由等待区域属性值开始,逐渐递变修改为所述可视区域属性值,使所述当前显示的轮播图从右向左逐渐滑出所述可视区域,所述轮播显示的轮播图从右向左跟随所述当前显示的轮播图的滑出逐渐滑入所述可视区域;
其中,所述等待区域位于所述可视区域的右侧,所述过渡区域位于所述可视区域的左侧。
可选的,在所述当前显示的轮播图从右向左逐渐滑出所述可视区域后,所述方法还包括:
将所述当前显示的轮播图定位属性值由所述过渡区域属性值修改为所述可视区域属性值。
第二方面,本发明实施例提供了一种轮播图的切换显示装置,所述装置应用于客户端,其特征在于,
所述客户端的界面中包括用于显示所述轮播图的可视区域,各所述轮播图均设置有定位属性,所述定位属性用于定义所述轮播图在所述客户端界面的区域;
所述装置包括:
接收模块,用于接收第一轮播图的显示指令;
第一确定模块,用于根据所述显示指令,从等待显示的轮播图中确定所述第一轮播图;
第一处理模块,用于根据所述第一轮播图和当前显示在所述客户端界面中的可视区域的第二轮播图的预定轮播顺序,修改所述第一轮播图和所述第二轮播图的定位属性值,以使所述第二轮播图沿与所述预定轮播顺序对应的方向逐渐滑出所述可视区域,所述第一轮播图沿与所述预定轮播顺序对应的方向跟随所述第二轮播图的滑出逐渐滑入所述可视区域。
可选的,所述客户端界面中提供有与每一所述轮播图对应的显示按钮;
所述接收模块具体用于:接收用户通过点击所述第一轮播图对应的显示按钮下发的显示指令。
可选的,所述等待显示的轮播图的定位属性值相同,或者,每两张等待显示的轮播图的定位属性值的差值小于等于第一阈值。
可选的,所述预定轮播顺序为:所述第一轮播图位于所述第二轮播图之后;
所述预定轮播顺序对应的方向为:从右向左方向;
所述第一处理模块具体用于:
根据所述预定轮播顺序,将所述第二轮播图的定位属性值由可视区域属性值开始,逐渐递变修改为过渡区域属性值,将所述第一轮播图的定位属性值由等待区域属性值逐渐递变修改为所述可视区域属性值,使所述第二轮播图从右向左逐渐滑出所述可视区域,所述第一轮播图从右向左跟随所述第二轮播图的滑出逐渐滑入所述可视区域;
和/或
所述预定轮播顺序为:所述第一轮播图位于所述第二轮播图之前;
所述预定轮播顺序对应的方向为:从左向右方向;
所述第一处理模块具体用于:
根据所述预定轮播顺序,将所述第二轮播图的定位属性值由可视区域属性值,逐渐递变修改为等待区域属性值,将所述第一轮播图的定位属性值由等待区域属性值修改为过渡区域属性值后,再将所述第一轮播图的定位属性值由所述过渡区域属性值开始,逐渐递变修改为所述可视区域属性值,以使所述第二轮播图从左向右逐渐滑出所述可视区域,所述第一轮播图从左向右跟随所述第二轮播图的滑出逐渐滑入所述可视区域;
其中,所述等待区域位于所述可视区域的右侧,所述过渡区域位于所述可视区域的左侧。
可选的,在所述第二轮播图从右向左逐渐滑出所述可视区域后,所述装置还包括:
第一修改模块,用于将所述第二轮播图的定位属性值由所述过渡区域属性值修改为所述可视区域属性值。
可选的,所述装置还包括:
第一确定模块,用于按照预先设定的轮播图轮播时间间隔,根据预先设定的轮播顺序,确定轮播显示的轮播图,所述轮播显示的轮播图为所述轮播顺序中与当前显示的轮播图相邻的下一张轮播图;
第二处理模块,用于将所述当前显示的轮播图的定位属性值由所述可视区域的属性值开始,逐渐递变修改为过渡区域属性值,将所述轮播显示的轮播图的定位属性值由等待区域属性值开始,逐渐递变修改为所述可视区域属性值,使所述当前显示的轮播图从右向左逐渐滑出所述可视区域,所述轮播显示的轮播图从右向左跟随所述当前显示的轮播图的滑出逐渐滑入所述可视区域;
其中,所述等待区域位于所述可视区域的右侧,所述过渡区域位于所述可视区域的左侧。
可选的,在所述当前显示的轮播图从右向左逐渐滑出所述可视区域后,所述装置还包括:
第二修改模块,用于将所述当前显示的轮播图定位属性值由所述过渡区域属性值修改为所述可视区域属性值。
第三方面,本发明实施例提供了一种电子设备,包括处理器和存储器,其中:
存储器,用于存放计算机程序;
处理器,用于执行存储器上所存放的程序时,实现上述任一轮播图的切换显示方法所述的方法步骤。
第四方面,本发明实施例提供了一种计算机可读存储介质,其特征在于,该计算机可读存储介质内存储有计算机程序,该计算机程序被处理器执行时实现上述任一轮播图的切换显示方法所述的方法步骤。
第五方面,本发明实施例提供了一种包含指令的计算机程序产品,当其在计算机上运行时,使得计算机执行上述任一轮播图的切换显示方法所述的方法步骤。
第六方面,本发明实施例提供了一种计算机程序,当其在计算机上运行时,使得计算机执行上述任一轮播图的切换显示方法所述的方法步骤。
本发明实施例提供的一种轮播图的切换显示方法、装置、电子设备及存储介质,在接收第一轮播图的显示指令后,根据显示指令,从等待显示的轮播图中确定第一轮播图;然后,根据第一轮播图和当前显示在客户端界面中的可视区域的第二轮播图的预定轮播顺序,修改第一轮播图和第二轮播图的定位属性值,以使第二轮播图沿与预定轮播顺序对应的方向逐渐滑出可视区域,第一轮播图沿与预定轮播顺序对应的方向跟随第二轮播图的滑出逐渐滑入可视区域。在这个过程中,将可视区域内当前显示的轮播图切换为用户选择的任何一张轮播图进行显示时,在可视区域都只需要滑动当前显示的轮播图和用户选择的轮播图即可,不需要在可视区域很快滑动多张轮播图,切换效果优雅,不容易造成人眼的不适,从而可以提升用户体验。
附图说明
为了更清楚地说明本发明实施例或现有技术中的技术方案,下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍,显而易见地,下面描述中的附图仅仅是本发明的一些实施例,对于本领域普通技术人员来讲,在不付出创造性劳动的前提下,还可以根据这些附图获得其他的附图。
图1为本发明实施例提供的一种轮播图的切换显示方法的流程示意图;
图2为可视区域显示第二轮播图的效果图;
图3为第一轮播图和第二轮播图在滑动过程中,可视区域显示的效果图;
图4为可视区域显示第一轮播图的效果图;
图5为本发明实施例中可视区域、等待区域和过渡区域的分布图;
图6为本发明实施例提供的用于实现图片自动轮播的流程示意图;
图7为本发明实施例提供的一种轮播图的切换显示装置的结构示意图;
图8为本发明实施例提供的用于实现自动轮播的组件的结构示意图;
图9为本发明实施例提供的一种电子设备的结构示意图。
具体实施方式
下面将结合本发明实施例中的附图,对本发明实施例中的技术方案进行清楚、完整地描述,显然,所描述的实施例仅仅是本发明一部分实施例,而不是全部的实施例。基于本发明中的实施例,本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例,都属于本发明保护的范围。
现有技术中,而在用户操作干预下,当用户选择需要显示的轮播图时,如果用户选择的轮播图在轮播顺序中是与当前显示的轮播图不相邻的轮播图时,则在滑动轮播时,可视区域中会滑动多张轮播图。可视区域中会很快滑动多张轮播图,这样切换轮播效果不够优雅,很容易造成人眼的不适,用户体验较差。为了解决该技术问题,本发明实施例提供了一种轮播图的切换显示方法、装置、电子设备及存储介质。
需要说明的是,本文所述及的客户端可以是应用程序或浏览器等软件,也可以是手机或电脑等电子设备,本发明实施例对此不做具体限定。
参照图1,本发明实施例提供的一种轮播图的切换显示方法,应用于客户端,客户端的界面中包括用于显示轮播图的可视区域,各轮播图均设置有定位属性,定位属性用于定义轮播图在客户端界面的区域;根据各轮播图的定位属性值可以确定各轮播图在客户端界面中的位置。通过修改各轮播图的定位属性值可以对对应的各轮播图进行绝对定位。轮播图的具有的定位属性可以包括图片的边界值,例如,左边界left值。
本发明实施例中,具体的,将客户端界面划分为可视区域和可视区域之外的区域,可视区域之外的区域设置为隐藏区域,这样,只有在轮播图位于可视区域时显示,而位于可视区域之外时,为不可见的,亦即,当定位属性值定义了轮播图的区域时,若轮播图的部分或者全部位于可视区域,则位于可视区域的部分是可见的,而位于可视区域的之外的部分为不可见的。
该方法包括如下步骤:
S101、接收第一轮播图的显示指令;
预先设置了多张(至少为两张)用于轮播的图片,也就是轮播图。每一张轮播图都具有标识,轮播图的标识是用于唯一标记轮播图的,可以设置为按照针对所有轮播图预设的轮播顺序拟的顺序编号。例如,设置了3张轮播图,包括依次轮播的一张人物图片、一张动物图片和一张包含人物和动物的图片,则可以将人物图片的顺序编号设置为1,并将1作为该人物图片的标识;将动物图片的顺序编号设置为2,并将2作为该动物图片的标识;将包含人物和动物的图片的顺序编号设置为3,并将3作为该包含人物和动物的图片的标识,可以按照123顺序周而复始的轮播。
第一轮播图是等待显示的轮播图中的任一张轮播图,显示指令中可以包括第一轮播图的标识。等待显示的轮播图是指当前处于等待显示状态的轮播图,具体包括所设置的多张轮播图中,除去当前显示在客户端界面中的可视区域的第二轮播图之外的所有轮播图,其中,可视区域用于在轮播显示轮播图的区域。
S101具体可以通过如下方式实现:客户端界面中提供有与每一轮播图对应的显示按钮;接收用户通过点击显示按钮下发的显示指令。也就是说,用户点击任一显示按钮,可以向客户端输入显示按钮对应的轮播图的显示指令。例如,在客户端界面中的可视区域设置每张轮播图对应的显示按钮。
接收第一轮播图的显示指令可以包括:接收用户通过点击第一轮播图对应的显示按钮下发的显示指令。
S102、根据显示指令,从等待显示的轮播图中确定第一轮播图;
具体的,根据显示指令中携带的第一轮播图的标识,从等待显示的轮播图中确定与第一轮播图标识相同的轮播图。
示例性的,预设N张轮播图,轮播的顺序编号分别为1、2、3…N,1、2、3…N也是对应轮播图的标识,分别对应轮播图1、轮播图2、轮播图3…轮播图N。当前可视区域显示的是轮播图2,则轮播图1、轮播图2、轮播图3…轮播图N中除去轮播图2之外的所有轮播图处于等待状态。用户点击顺序编号为3的轮播图对应的显示按钮,即用户输入了针对轮播图3的显示指令,客户端接收到这个指令后,会从等待显示的轮播图中,确定顺序编号为3的轮播图,该图即为第一轮播图。
S103、根据第一轮播图和当前显示在客户端界面中的可视区域的第二轮播图的预定轮播顺序,修改第一轮播图和第二轮播图的定位属性值,以使第二轮播图沿与预定轮播顺序对应的方向逐渐滑出可视区域,第一轮播图沿与预定轮播顺序对应的方向跟随第二轮播图的滑出逐渐滑入可视区域。
可以理解的是,多张轮播图的轮播顺序是预先设定的,在用户未手动进行轮播图切换时,轮播图是按照预先设定的轮播顺序自动轮播的。而第一轮播图和第二轮播的预定轮播顺序是指按照轮播图的轮播顺序轮播时,第一轮播图与第二轮播图的先后顺序,轮播图的轮播顺序是预先确定的。按照轮播顺序进行轮播时,轮播图是按照轮播切换方向进行滑动的。如果第一轮播图和第二轮播的预定轮播顺序为第一轮播图在第二轮播图之前,则与第一轮播图和第二轮播的预定轮播顺序对应的方向为与轮播切换方向相反;如果第一轮播图和第二轮播的预定轮播顺序为第一轮播图在第二轮播图之后,则第一方向与轮播顺序中对应的轮播切换方向相同。
示例性的,预设N张轮播图,轮播的顺序编号分别为1、2、3…N,1、2、3…N也是对应轮播图的标识,分别对应轮播图1、轮播图2、轮播图3…轮播图N。按照轮播顺序轮播时,轮播图1、轮播图2、轮播图3…轮播图N均是从右向左逐渐滑入可视区域,再逐渐滑出可视区域,则轮播切换方向为从右向左的方向。当前显示的第二轮播图是轮播图2,如果确定的第一轮播图为轮播图1,则与第一轮播图和第二轮播图的预定轮播顺序对应的方向为从左向右,轮播图2可以从左向右滑出可视区域,轮播图1沿从左向右的方向跟随轮播图2的滑出滑入可视区域,即轮播图1在可视区域内显示。如果确定的第一轮播图为轮播图3,则与第一轮播图和第二轮播图的预定轮播顺序对应的方向为从右向左,轮播图2可以从右向左滑出可视区域,轮播图3沿从右向左的方向跟随轮播图2的滑出滑入可视区域,即轮播图3在可视区域内显示。
修改第一轮播图的定位属性值和第二轮播图的定位属性值,第一轮播图的定位属性值和第二轮播图的定位属性值均逐渐变化,也就是对第一轮播图和第二轮播图在客户端界面中进行多次定位,实现第一轮播图和第二轮播图的滑动。根据可视区域的位置和大小,可以确定修改第一轮播图的定位属性值和第二轮播图的定位属性值的大小,从而可以实现使第二轮播图沿与第一轮播图和第二轮播图的预定轮播顺序对应的方向逐渐滑出可视区域,第一轮播图沿与第一轮播图和第二轮播图的预定轮播顺序对应的方向跟随第二轮播图的滑出逐渐滑入可视区域。其中,第一轮播图与第二轮播图的移动速度可以完全相同,也可以小于预设移动速度阈值。参照图2、图3和图4,从图2到图3再到图4的变化过程,示出了第二轮播图从右向左逐渐滑出可视区域,第一轮播图跟随第二轮播图滑出从右向左逐渐滑入可视区域的过程。
参照图5,在客户端的界面中,预先设置用于显示轮播图的可视区域和用于存放等待显示的轮播图的等待区域,等待区域位于可视区域的一侧。可视区域具有可视区域属性值,是用于确定可视区域的位置和大小的。等待区域具有等待区域属性值,是用于确定等待区域的位置和大小的。通过设置轮播图的定位属性值,可使将其定位在等待区域,等待区域中设置多层,使得定位在等待区域的多张轮播图可以以层叠的方式排列。针对位于等待区域的所有轮播图的父级元素即等待区域的外框设置了overflow:hidden,这样就使得位于等待区域的所有轮播图隐藏,即定位在客户端的界面中等待区域的所有轮播图均不可见。
应用图1所示实施例,在接收第一轮播图的显示指令后,根据显示指令,从等待显示的轮播图中确定第一轮播图;然后,根据第一轮播图和当前显示在客户端界面中的可视区域的第二轮播图的预定轮播顺序,修改第一轮播图和第二轮播图的定位属性值,以使第二轮播图沿与预定轮播顺序对应的方向逐渐滑出可视区域,第一轮播图沿与预定轮播顺序对应的方向跟随第二轮播图的滑出逐渐滑入可视区域。在这个过程中,将可视区域内当前显示的轮播图切换为用户选择的任何一张轮播图进行显示时,在可视区域都只需要滑动当前显示的轮播图和用户选择的轮播图即可,不需要在可视区域很快滑动多张轮播图,切换效果优雅,不容易造成人眼的不适,从而可以提升用户体验。
示例性的,如图5所示,可视区域的范围为[0,800],轮播图的定位属性值为左边界left值。预设N张轮播图,轮播的顺序编号分别为1、2、3…N,1、2、3…N也是对应轮播图的标识,分别对应轮播图1、轮播图2、轮播图3…轮播图N。按照轮播顺序轮播时,轮播图1、轮播图2、轮播图3…轮播图N均是从右向左逐渐滑入可视区域,再逐渐滑出可视区域,则轮播切换方向为从右向左的方向,当前可视区域显示的是轮播图2。
如果接收到了轮播图1的显示指令,则可以修改轮播图2的定位属性值,根据滑动速度,轮播图每秒移动80,使轮播图1的定位属性值依次经过0,80,160,240,320,400,480,560,640,720到800的变化,随着定位属性值的变化,可以将轮播图2依次定位到对应的10个位置,从而轮播图2从左向右逐渐滑出可视区域。同步修改轮播图1的定位属性值,根据滑动速度,轮播图每秒移动80,使轮播图1的定位属性值依次经过-800,-720,-640,-560,-480,-400,-320,-240,-160,-80到0的变化,随着定位属性值的变化,可以将轮播1依次定位到对应的10个位置,从而轮播图1从左向右根据轮播图2的滑出逐渐滑入可视区域。
如果接收到了轮播图3的显示指令,则可以修改轮播图2的定位属性值,根据滑动速度,轮播图每秒移动80,使轮播图1的定位属性值依次经过0,-80,-160,240,-320,-400,-480,-560,-640,-720到-800的变化,随着定位属性值的变化,可以将轮播图2依次定位到对应的10个位置,从而轮播图2从右向左逐渐滑出可视区域。同步修改轮播图1的定位属性值,根据滑动速度,轮播图每秒移动80,使轮播图1的定位属性值依次经过800,720,640,560,480,400,320,240,160,80到0的变化,随着定位属性值的变化,可以将轮播1依次定位到对应的10个位置,从而轮播图1从右向左根据轮播图2的滑出逐渐滑入可视区域。
本发明实施例的一种实施方式中,可视区域和等待区域可以是连续设置的。在对两张轮播图进行切换时,两张轮播图在可视区域内不存在间距,可视区域内显示两张轮播图的局部时,不会出现中间的空白区域,可以提升用户的视觉体验。当然,在本发明实施例的其它实施方式中,可视区域和等待区域也可以是分开设置的,可以设置两张轮播图在切换过程中之间的间隔小于预设的间距阈值。
本发明实施例的一种实施方式中,等待显示的轮播图的定位属性值相同,或者,每两张等待显示的轮播图的定位属性值的差值小于等于第一阈值。定位属性值相同或者相近,可以决定等待显示的轮播图逐渐滑入可视区域过程中的滑动距离。在滑动速度固定的情况下,这样设置可以保证各轮播图的切换时间基本一致。同时,还可以使任意两张轮播图同时在可视区域滑动的过程中,间距基本一致,可以提升用户的视觉体验。
参照图2,本发明实施例的一种实施方式中,在客户端界面中可以预先设置可视区域、等待区域和过渡区域。
预定轮播顺序为:第一轮播图位于第二轮播图之后,该预定轮播顺序是指第一轮播图和第二轮播图的预定轮播顺序;
预定轮播顺序对应的方向为:从右向左方向;
根据第一轮播图和当前显示在客户端界面中的可视区域的第二轮播图的预定轮播顺序,修改第一轮播图和第二轮播图的定位属性值,以使第二轮播图沿与预定轮播顺序对应的方向逐渐滑出可视区域,第一轮播图沿与预定轮播顺序对应的方向跟随第二轮播图的滑出逐渐滑入可视区域包括:
根据预定轮播顺序,将第二轮播图的定位属性值由可视区域属性值开始,逐渐递变修改为过渡区域属性值,将第一轮播图的定位属性值由等待区域属性值逐渐递变修改为可视区域属性值,使第二轮播图从右向左逐渐滑出可视区域,第一轮播图从右向左跟随第二轮播图的滑出逐渐滑入可视区域;
和/或
第一轮播图为轮播顺序中位于第二轮播图之前的轮播图;
预定轮播顺序为:第一轮播图位于第二轮播图之前;
预定轮播顺序对应的方向为:从左向右方向;
根据第一轮播图和当前显示在客户端界面中的可视区域的第二轮播图的预定轮播顺序,修改第一轮播图和第二轮播图的定位属性值,以使第二轮播图沿与预定轮播顺序对应的方向逐渐滑出可视区域,第一轮播图沿与预定轮播顺序对应的方向跟随第二轮播图的滑出逐渐滑入可视区域包括:
根据预定轮播顺序,将第二轮播图的定位属性值由可视区域属性值,逐渐递变修改为等待区域属性值,将第一轮播图的定位属性值由等待区域属性值修改为过渡区域属性值后,再将第一轮播图的定位属性值由过渡区域属性值开始,逐渐递变修改为可视区域属性值,以使第二轮播图从左向右逐渐滑出可视区域,第一轮播图从左向右跟随第二轮播图的滑出逐渐滑入可视区域;
其中,等待区域位于可视区域的右侧,过渡区域位于可视区域的左侧。
进一步的,在第二轮播图从右向左逐渐滑出可视区域后,该方法还包括:
将第二轮播图的定位属性值由过渡区域属性值修改为可视区域属性值。
参照图6,本发明实施例的一种实施方式中,还可以按照以下方式实现轮播效果:
S201、按照预先设定的轮播图轮播时间间隔,根据预先设定的轮播顺序,确定轮播显示的轮播图,轮播显示的轮播图为轮播顺序中与当前显示的轮播图相邻的下一张轮播图;
S202、将当前显示的轮播图的定位属性值由可视区域的属性值开始,逐渐递变修改为过渡区域属性值,将轮播显示的轮播图的定位属性值由等待区域属性值开始,逐渐递变修改为可视区域属性值,使当前显示的轮播图从右向左逐渐滑出可视区域,轮播显示的轮播图从右向左跟随当前显示的轮播图的滑出逐渐滑入可视区域;
其中,等待区域位于可视区域的右侧,过渡区域位于可视区域的左侧。
进一步的,在当前显示的轮播图从右向左逐渐滑出可视区域后,该轮播图的切换显示方法还包括:
将当前显示的轮播图定位属性值由过渡区域属性值修改为可视区域属性值。
示例性的,如图5所示,过渡区域、可视区域和等待区域从左到右依次设置在客户端界面中,可视区域的范围为[0,800],可视区域定位属性值为可视区域的左边界left值,为0;过渡区域的范围为[-800,0],过渡区域定位属性值为过渡区域的左边界left值,为-800;等待区域的范围为[800,1600],等待区域属性值为等待区域的左边界left值,为800,轮播图的定位属性值为左边界left值。预设3张轮播图,轮播的顺序编号分别为1、2和3,1、2和3也是对应轮播图的标识,分别对应轮播图1、轮播图2和轮播图3。按照轮播顺序轮播时,轮播图1、轮播图2和轮播图3均是从右向左逐渐滑入可视区域,再逐渐滑出可视区域,则轮播切换方向为从右向左的方向。
可视区域当前显示的是轮播图2,轮播图1和轮播图3均定位在等待区域。当前轮播图2的定位属性值为0,轮播图1和轮播图3的定位属性值均为800。如果第一轮播图为轮播图3,将轮播图2的定位属性值从0依次经过-80,-160,-240,-320,-400,-480,-560,-640,-720逐渐递变修改到-800,随着定位属性值的变化,可以将轮播图2依次定位到对应的10个位置,从而轮播图2从右向左逐渐滑出可视区域。将轮播图3的定位属性值从800依次经过720,640,560,480,400,320,240,160,80逐渐递变修改为0,随着定位属性值的变化,可以将轮播图3依次定位到对应的10个位置,从而轮播图3从右向左逐渐滑入可视区域。将轮播图3和轮播图2同步调整,可以实现轮播图2从右向左逐渐滑出可视区域,轮播图3从右向左逐渐滑出可视区域跟随轮播图2的滑出逐渐滑入可视区域。
如果即将切换显示的是轮播图1,将轮播图2的定位属性值从0依次经过80,160,240,320,400,480,560,640,720逐渐递变修改到800,随着定位属性值的变化,可以将轮播图2依次定位到对应的10个位置,从而轮播图2从左向右逐渐滑出可视区域。将轮播图1的定位属性值从800修改为-800,直接将轮播图1定位到过渡区域,然后将轮播图1的定位属性值从-800,依次经过-720,-640,-560,-480,-400,-320,-240,-160,-80逐渐递变修改为0,随着定位属性值的变化,可以将轮播图1依次定位到对应的10个位置,从而轮播图1从左向右逐渐滑入可视区域。将轮播图1和轮播图2同步调整,可以实现轮播图2从左向右逐渐滑出可视区域,轮播图1从左向右逐渐滑出可视区域跟随轮播图2的滑出逐渐滑入可视区域。
在上述实施例的基础上,参照图7,本发明实施例还提供了一种轮播图的切换显示装置,该装置应用于客户端,
客户端的界面中包括用于显示轮播图的可视区域,各轮播图均设置有定位属性,定位属性用于定义轮播图在客户端界面的区域;
该装置包括:
接收模块41,用于接收第一轮播图的显示指令;
第一确定模块42,
用于根据显示指令,从等待显示的轮播图中确定第一轮播图;
第一处理模块43,用于根据第一轮播图和当前显示在客户端界面中的可视区域的第二轮播图的预定轮播顺序,修改第一轮播图和第二轮播图的定位属性值,以使第二轮播图沿与预定轮播顺序对应的方向逐渐滑出可视区域,第一轮播图沿与预定轮播顺序对应的方向跟随第二轮播图的滑出逐渐滑入可视区域。
应用图7所示实施例,在接收第一轮播图的显示指令后,根据显示指令,从等待显示的轮播图中确定第一轮播图;然后,根据第一轮播图和当前显示在客户端界面中的可视区域的第二轮播图的预定轮播顺序,修改第一轮播图和第二轮播图的定位属性值,以使第二轮播图沿与预定轮播顺序对应的方向逐渐滑出可视区域,第一轮播图沿与预定轮播顺序对应的方向跟随第二轮播图的滑出逐渐滑入可视区域。在这个过程中,将可视区域内当前显示的轮播图切换为用户选择的任何一张轮播图进行显示时,在可视区域都只需要滑动当前显示的轮播图和用户选择的轮播图即可,不需要在可视区域很快滑动多张轮播图,切换效果优雅,不容易造成人眼的不适,从而可以提升用户体验。
本发明实施例的一种实施方式中,客户端界面中提供有与每一轮播图对应的显示按钮;
接收模块41具体用于:接收用户通过点击第一轮播图对应的显示按钮下发的显示指令。
本发明实施例的一种实施方式中,等待显示的轮播图的定位属性值相同,或者,每两张等待显示的轮播图的定位属性值的差值小于等于第一阈值。
本发明实施例的一种实施方式中,预定轮播顺序为:第一轮播图位于第二轮播图之后;
预定轮播顺序对应的方向为:从右向左方向;
第一处理模块43具体用于:
根据预定轮播顺序,将第二轮播图的定位属性值由可视区域属性值开始,逐渐递变修改为过渡区域属性值,将第一轮播图的定位属性值由等待区域属性值逐渐递变修改为可视区域属性值,使第二轮播图从右向左逐渐滑出可视区域,第一轮播图从右向左跟随第二轮播图的滑出逐渐滑入可视区域;
和/或
预定轮播顺序为:第一轮播图位于第二轮播图之前;
预定轮播顺序对应的方向为:从左向右方向;
第一处理模块43具体用于:
根据预定轮播顺序,将第二轮播图的定位属性值由可视区域属性值,逐渐递变修改为等待区域属性值,将第一轮播图的定位属性值由等待区域属性值修改为过渡区域属性值后,再将第一轮播图的定位属性值由过渡区域属性值开始,逐渐递变修改为可视区域属性值,以使第二轮播图从左向右逐渐滑出可视区域,第一轮播图从左向右跟随第二轮播图的滑出逐渐滑入可视区域;
其中,等待区域位于可视区域的右侧,过渡区域位于可视区域的左侧。
进一步的,在第二轮播图从右向左逐渐滑出可视区域后,装置还包括:
第一修改模块,用于将第二轮播图的定位属性值由过渡区域属性值修改为可视区域属性值。
参照图8,本发明实施例的一种实施方式中,该装置还包括:
第二确定模块51,用于按照预定的轮播图轮播时间间隔,根据预定轮播顺序,确定轮播显示的轮播图,轮播显示的轮播图为轮播顺序中与当前显示的轮播图相邻的下一张轮播图;
第二处理模块52,用于将当前显示的轮播图的定位属性值由可视区域的属性值开始,逐渐递变修改为过渡区域属性值,将轮播显示的轮播图的定位属性值由等待区域属性值开始,逐渐递变修改为可视区域属性值,使当前显示的轮播图从右向左逐渐滑出可视区域,轮播显示的轮播图从右向左跟随当前显示的轮播图的滑出逐渐滑入可视区域;
其中,等待区域位于可视区域的右侧,过渡区域位于可视区域的左侧。
进一步的,在当前显示的轮播图从右向左逐渐滑出可视区域后,装置还包括:
第二修改模块,用于将当前显示的轮播图定位属性值由过渡区域属性值修改为可视区域属性值。
本发明实施例还提供了一种电子设备,如图9所示,包括处理器210和存储器220,其中,
存储器220,用于存放计算机程序;
处理器210,用于执行存储器220上所存放的程序时,实现如下步骤:
接收第一轮播图的显示指令;
根据显示指令,从等待显示的轮播图中确定第一轮播图;
根据第一轮播图和当前显示在客户端界面中的可视区域的第二轮播图的预定轮播顺序,修改第一轮播图和第二轮播图的定位属性值,以使第二轮播图沿与预定轮播顺序对应的方向逐渐滑出可视区域,第一轮播图沿与预定轮播顺序对应的方向跟随第二轮播图的滑出逐渐滑入可视区域。
关于该方法各个步骤的具体实现以及相关解释内容可以参见上述图3所示的方法实施例,在此不做赘述。
另外,处理器210执行存储器220上所存放的程序而实现的应用设置方法的其他实现方式,与前述方法实施例部分所提及的实现方式相同,这里也不再赘述。
上述电子设备可以具备有实现上述电子设备与其他设备之间通信的通信接口。
上述的处理器210,通信接口,存储器220通过通信总线完成相互间的通信,此处所提到的通信总线可以是外设部件互连标准(Peripheral Component Interconnect,PCI)总线或扩展工业标准结构(Extended Industry Standard Architecture,EISA)总线等。该通信总线可以分为地址总线、数据总线、控制总线等。
存储器220可以包括随机存取存储器(Random Access Memory,RAM),也可以包括非易失性存储器(Non-Volatile Memory,NVM),例如至少一个磁盘存储器。可选的,存储器还可以是至少一个位于远离前述处理器的存储装置。
上述的处理器210可以是通用处理器,包括中央处理器(Central ProcessingUnit,CPU)、网络处理器(Network Processor,NP)等;还可以是数字信号处理器(DigitalSignal Processing,DSP)、专用集成电路(Application Specific Integrated Circuit,ASIC)、现场可编程门阵列(Field-Programmable Gate Array,FPGA)或者其他可编程逻辑器件、分立门或者晶体管逻辑器件、分立硬件组件。
在接收第一轮播图的显示指令后,根据显示指令,从等待显示的轮播图中确定第一轮播图;然后,根据第一轮播图和当前显示在客户端界面中的可视区域的第二轮播图的预定轮播顺序,修改第一轮播图和第二轮播图的定位属性值,以使第二轮播图沿与预定轮播顺序对应的方向逐渐滑出可视区域,第一轮播图沿与预定轮播顺序对应的方向跟随第二轮播图的滑出逐渐滑入可视区域。在这个过程中,将可视区域内当前显示的轮播图切换为用户选择的任何一张轮播图进行显示时,在可视区域都只需要滑动当前显示的轮播图和用户选择的轮播图即可,不需要在可视区域很快滑动多张轮播图,切换效果优雅,不容易造成人眼的不适,从而可以提升用户体验。
在本发明提供的又一实施例中,还提供了一种计算机可读存储介质,该计算机可读存储介质中存储有指令,当其在计算机上运行时,使得计算机执行上述实施例中任一的轮播图的切换显示方法。
在接收第一轮播图的显示指令后,根据显示指令,从等待显示的轮播图中确定第一轮播图;然后,根据第一轮播图和当前显示在客户端界面中的可视区域的第二轮播图的预定轮播顺序,修改第一轮播图和第二轮播图的定位属性值,以使第二轮播图沿与预定轮播顺序对应的方向逐渐滑出可视区域,第一轮播图沿与预定轮播顺序对应的方向跟随第二轮播图的滑出逐渐滑入可视区域。在这个过程中,将可视区域内当前显示的轮播图切换为用户选择的任何一张轮播图进行显示时,在可视区域都只需要滑动当前显示的轮播图和用户选择的轮播图即可,不需要在可视区域很快滑动多张轮播图,切换效果优雅,不容易造成人眼的不适,从而可以提升用户体验。
在本发明提供的再一实施例中,还提供了一种包含指令的计算机程序产品,当其在计算机上运行时,使得计算机执行上述任一轮播图的切换显示方法的方法步骤。
在接收第一轮播图的显示指令后,根据显示指令,从等待显示的轮播图中确定第一轮播图;然后,根据第一轮播图和当前显示在客户端界面中的可视区域的第二轮播图的预定轮播顺序,修改第一轮播图和第二轮播图的定位属性值,以使第二轮播图沿与预定轮播顺序对应的方向逐渐滑出可视区域,第一轮播图沿与预定轮播顺序对应的方向跟随第二轮播图的滑出逐渐滑入可视区域。在这个过程中,将可视区域内当前显示的轮播图切换为用户选择的任何一张轮播图进行显示时,在可视区域都只需要滑动当前显示的轮播图和用户选择的轮播图即可,不需要在可视区域很快滑动多张轮播图,切换效果优雅,不容易造成人眼的不适,从而可以提升用户体验。
在本发明提供的再一实施例中,还提供了一种计算机程序,当其在计算机上运行时,使得计算机执行上述任一轮播图的切换显示方法的方法步骤。
在接收第一轮播图的显示指令后,根据显示指令,从等待显示的轮播图中确定第一轮播图;然后,根据第一轮播图和当前显示在客户端界面中的可视区域的第二轮播图的预定轮播顺序,修改第一轮播图和第二轮播图的定位属性值,以使第二轮播图沿与预定轮播顺序对应的方向逐渐滑出可视区域,第一轮播图沿与预定轮播顺序对应的方向跟随第二轮播图的滑出逐渐滑入可视区域。在这个过程中,将可视区域内当前显示的轮播图切换为用户选择的任何一张轮播图进行显示时,在可视区域都只需要滑动当前显示的轮播图和用户选择的轮播图即可,不需要在可视区域很快滑动多张轮播图,切换效果优雅,不容易造成人眼的不适,从而可以提升用户体验。
需要说明的是,在本文中,诸如第一和第二等之类的关系术语仅仅用来将一个实体或者操作与另一个实体或操作区分开来,而不一定要求或者暗示这些实体或操作之间存在任何这种实际的关系或者顺序。而且,术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含,从而使得包括一系列要素的过程、方法、物品或者设备不仅包括那些要素,而且还包括没有明确列出的其他要素,或者是还包括为这种过程、方法、物品或者设备所固有的要素。在没有更多限制的情况下,由语句“包括一个……”限定的要素,并不排除在包括要素的过程、方法、物品或者设备中还存在另外的相同要素。
本说明书中的各个实施例均采用相关的方式描述,各个实施例之间相同相似的部分互相参见即可,每个实施例重点说明的都是与其他实施例的不同之处。尤其,对于装置、系统、电子设备、计算机可读存储介质、计算机程序产品以及计算机程序实施例而言,由于其基本相似于方法实施例,所以描述的比较简单,相关之处参见方法实施例的部分说明即可。
以上仅为本发明的较佳实施例而已,并非用于限定本发明的保护范围。凡在本发明的精神和原则之内所作的任何修改、等同替换、改进等,均包含在本发明的保护范围内。
Claims (14)
1.一种轮播图的切换显示方法,所述方法应用于客户端,其特征在于,
所述客户端的界面中包括用于显示所述轮播图的可视区域,各所述轮播图均设置有定位属性,所述定位属性用于定义所述轮播图在所述客户端界面的区域;
所述方法包括:
接收第一轮播图的显示指令;
根据所述显示指令,从等待显示的轮播图中确定所述第一轮播图;
根据所述第一轮播图和当前显示在所述客户端界面中的可视区域的第二轮播图的预定轮播顺序,修改所述第一轮播图和所述第二轮播图的定位属性值,以使所述第二轮播图沿与所述预定轮播顺序对应的方向逐渐滑出所述可视区域,所述第一轮播图沿与所述预定轮播顺序对应的方向跟随所述第二轮播图的滑出逐渐滑入所述可视区域;
在所述预定轮播顺序为:所述第一轮播图位于所述第二轮播图之后;且所述预定轮播顺序对应的方向为:从右向左方向时;所述根据所述第一轮播图和当前显示在所述客户端界面中的可视区域的第二轮播图的预定轮播顺序,修改所述第一轮播图和所述第二轮播图的定位属性值,以使所述第二轮播图沿与所述预定轮播顺序对应的方向逐渐滑出所述可视区域,所述第一轮播图沿所述与所述预定轮播顺序对应的方向跟随所述第二轮播图的滑出逐渐滑入所述可视区域包括:
根据所述预定轮播顺序,将所述第二轮播图的定位属性值由可视区域属性值开始,逐渐递变修改为过渡区域属性值,将所述第一轮播图的定位属性值由等待区域属性值逐渐递变修改为所述可视区域属性值,使所述第二轮播图从右向左逐渐滑出所述可视区域,所述第一轮播图从右向左跟随所述第二轮播图的滑出逐渐滑入所述可视区域;
和/或
在所述预定轮播顺序为:所述第一轮播图位于所述第二轮播图之前;且所述预定轮播顺序对应的方向为:从左向右方向时;所述根据所述第一轮播图和当前显示在所述客户端界面中的可视区域的第二轮播图的预定轮播顺序,修改所述第一轮播图和所述第二轮播图的定位属性值,以使所述第二轮播图沿与所述预定轮播顺序对应的方向逐渐滑出所述可视区域,所述第一轮播图沿所述与所述预定轮播顺序对应的方向跟随所述第二轮播图的滑出逐渐滑入所述可视区域包括:
根据所述预定轮播顺序,将所述第二轮播图的定位属性值由可视区域属性值,逐渐递变修改为等待区域属性值,将所述第一轮播图的定位属性值由等待区域属性值修改为过渡区域属性值后,再将所述第一轮播图的定位属性值由所述过渡区域属性值开始,逐渐递变修改为所述可视区域属性值,以使所述第二轮播图从左向右逐渐滑出所述可视区域,所述第一轮播图从左向右跟随所述第二轮播图的滑出逐渐滑入所述可视区域;
其中,所述等待区域位于所述可视区域的右侧,所述过渡区域位于所述可视区域的左侧。
2.根据权利要求1所述的方法,其特征在于,所述客户端界面中提供有与每一所述轮播图对应的显示按钮;
所述接收第一轮播图的显示指令的步骤,包括:
接收用户通过点击所述第一轮播图对应的显示按钮下发的显示指令。
3.根据权利要求1所述的方法,其特征在于,所述等待显示的轮播图的定位属性值相同,或者,每两张等待显示的轮播图的定位属性值的差值小于等于第一阈值。
4.根据权利要求1所述的方法,其特征在于,在所述第二轮播图从右向左逐渐滑出所述可视区域后,所述方法还包括:将所述第二轮播图的定位属性值由所述过渡区域属性值修改为所述可视区域属性值。
5.根据权利要求1所述的方法,其特征在于,所述方法还包括:
按照预先设定的轮播图轮播时间间隔,根据预先设定的轮播顺序,确定轮播显示的轮播图,所述轮播显示的轮播图为所述轮播顺序中与当前显示的轮播图相邻的下一张轮播图;
将所述当前显示的轮播图的定位属性值由所述可视区域的属性值开始,逐渐递变修改为过渡区域属性值,将所述轮播显示的轮播图的定位属性值由等待区域属性值开始,逐渐递变修改为所述可视区域属性值,使所述当前显示的轮播图从右向左逐渐滑出所述可视区域,所述轮播显示的轮播图从右向左跟随所述当前显示的轮播图的滑出逐渐滑入所述可视区域;
其中,所述等待区域位于所述可视区域的右侧,所述过渡区域位于所述可视区域的左侧。
6.根据权利要求5所述的方法,其特征在于,在所述当前显示的轮播图从右向左逐渐滑出所述可视区域后,所述方法还包括:
将所述当前显示的轮播图定位属性值由所述过渡区域属性值修改为所述可视区域属性值。
7.一种轮播图的切换显示装置,所述装置应用于客户端,其特征在于,
所述客户端的界面中包括用于显示所述轮播图的可视区域,各所述轮播图均设置有定位属性,所述定位属性用于定义所述轮播图在所述客户端界面的区域;
所述装置包括:
接收模块,用于接收第一轮播图的显示指令;
第一确定模块,用于根据所述显示指令,从等待显示的轮播图中确定所述第一轮播图;
第一处理模块,用于根据所述第一轮播图和当前显示在所述客户端界面中的可视区域的第二轮播图的预定轮播顺序,修改所述第一轮播图和所述第二轮播图的定位属性值,以使所述第二轮播图沿与所述预定轮播顺序对应的方向逐渐滑出所述可视区域,所述第一轮播图沿与所述预定轮播顺序对应的方向跟随所述第二轮播图的滑出逐渐滑入所述可视区域;
在所述预定轮播顺序为:所述第一轮播图位于所述第二轮播图之后;且所述预定轮播顺序对应的方向为:从右向左方向时;所述第一处理模块具体用于:
根据所述预定轮播顺序,将所述第二轮播图的定位属性值由可视区域属性值开始,逐渐递变修改为过渡区域属性值,将所述第一轮播图的定位属性值由等待区域属性值逐渐递变修改为所述可视区域属性值,使所述第二轮播图从右向左逐渐滑出所述可视区域,所述第一轮播图从右向左跟随所述第二轮播图的滑出逐渐滑入所述可视区域;
和/或
在所述预定轮播顺序为:所述第一轮播图位于所述第二轮播图之前;且所述预定轮播顺序对应的方向为:从左向右方向时;所述第一处理模块具体用于:
根据所述预定轮播顺序,将所述第二轮播图的定位属性值由可视区域属性值,逐渐递变修改为等待区域属性值,将所述第一轮播图的定位属性值由等待区域属性值修改为过渡区域属性值后,再将所述第一轮播图的定位属性值由所述过渡区域属性值开始,逐渐递变修改为所述可视区域属性值,以使所述第二轮播图从左向右逐渐滑出所述可视区域,所述第一轮播图从左向右跟随所述第二轮播图的滑出逐渐滑入所述可视区域;
其中,所述等待区域位于所述可视区域的右侧,所述过渡区域位于所述可视区域的左侧。
8.根据权利要求7所述的装置,其特征在于,所述客户端界面中提供有与每一所述轮播图对应的显示按钮;
所述接收模块具体用于:接收用户通过点击所述第一轮播图对应的显示按钮下发的显示指令。
9.根据权利要求7所述的装置,其特征在于,所述等待显示的轮播图的定位属性值相同,或者,每两张等待显示的轮播图的定位属性值的差值小于等于第一阈值。
10.根据权利要求7所述的装置,其特征在于,在所述第二轮播图从右向左逐渐滑出所述可视区域后,所述装置还包括:
第一修改模块,用于将所述第二轮播图的定位属性值由所述过渡区域属性值修改为所述可视区域属性值。
11.根据权利要求7所述的装置,其特征在于,所述装置还包括:
第一确定模块,用于按照预定的轮播图轮播时间间隔,根据预定轮播顺序,确定轮播显示的轮播图,所述轮播显示的轮播图为所述轮播顺序中与当前显示的轮播图相邻的下一张轮播图;
第二处理模块,用于将所述当前显示的轮播图的定位属性值由所述可视区域的属性值开始,逐渐递变修改为过渡区域属性值,将所述轮播显示的轮播图的定位属性值由等待区域属性值开始,逐渐递变修改为所述可视区域属性值,使所述当前显示的轮播图从右向左逐渐滑出所述可视区域,所述轮播显示的轮播图从右向左跟随所述当前显示的轮播图的滑出逐渐滑入所述可视区域;
其中,所述等待区域位于所述可视区域的右侧,所述过渡区域位于所述可视区域的左侧。
12.根据权利要求11所述的装置,其特征在于,在所述当前显示的轮播图从右向左逐渐滑出所述可视区域后,所述装置还包括:
第二修改模块,用于将所述当前显示的轮播图定位属性值由所述过渡区域属性值修改为所述可视区域属性值。
13.一种电子设备,其特征在于,包括处理器和存储器,其中:
存储器,用于存放计算机程序;
处理器,用于执行存储器上所存放的程序时,实现权利要求1-6任一所述的方法步骤。
14.一种计算机可读存储介质,其特征在于,所述计算机可读存储介质内存储有计算机程序,所述计算机程序被处理器执行时实现权利要求1-6任一所述的方法步骤。
Priority Applications (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN201810972994.1A CN110858154B (zh) | 2018-08-24 | 2018-08-24 | 一种轮播图的切换显示方法、装置、电子设备及存储介质 |
Applications Claiming Priority (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN201810972994.1A CN110858154B (zh) | 2018-08-24 | 2018-08-24 | 一种轮播图的切换显示方法、装置、电子设备及存储介质 |
Publications (2)
Publication Number | Publication Date |
---|---|
CN110858154A CN110858154A (zh) | 2020-03-03 |
CN110858154B true CN110858154B (zh) | 2023-09-01 |
Family
ID=69636231
Family Applications (1)
Application Number | Title | Priority Date | Filing Date |
---|---|---|---|
CN201810972994.1A Active CN110858154B (zh) | 2018-08-24 | 2018-08-24 | 一种轮播图的切换显示方法、装置、电子设备及存储介质 |
Country Status (1)
Country | Link |
---|---|
CN (1) | CN110858154B (zh) |
Families Citing this family (3)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN111428065A (zh) * | 2020-03-23 | 2020-07-17 | 北京明略软件系统有限公司 | 一种图片轮播方法、装置和设备 |
CN111459389B (zh) * | 2020-04-24 | 2021-06-04 | Oppo(重庆)智能科技有限公司 | 提示方法、电子装置和存储介质 |
CN112650401B (zh) * | 2020-12-24 | 2023-09-01 | 北京百度网讯科技有限公司 | 信息轮播方法、装置、电子设备及存储介质 |
Citations (7)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
WO2015109772A1 (zh) * | 2014-01-22 | 2015-07-30 | 华为技术有限公司 | 数据处理设备和数据处理方法 |
CN105988793A (zh) * | 2015-02-11 | 2016-10-05 | 阿里巴巴集团控股有限公司 | 用于屏幕显示设备的图像展示方法及装置 |
CN107147940A (zh) * | 2017-05-05 | 2017-09-08 | 广州阿里巴巴文学信息技术有限公司 | 内容轮播的方法、装置、电子设备和存储介质 |
US9798443B1 (en) * | 2013-09-10 | 2017-10-24 | Amazon Technologies, Inc. | Approaches for seamlessly launching applications |
CN107302671A (zh) * | 2017-06-30 | 2017-10-27 | 北京金山安全软件有限公司 | 素材拼接处理方法、装置、电子设备及存储介质 |
CN107885814A (zh) * | 2017-11-06 | 2018-04-06 | 北京金风科创风电设备有限公司 | 显示轮播图的方法和装置 |
US9959009B1 (en) * | 2016-12-23 | 2018-05-01 | Beijing Kingsoft Internet Security Software Co., Ltd. | Method for displaying information, and terminal equipment |
Family Cites Families (7)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CA2530370A1 (en) * | 2003-06-27 | 2005-01-06 | Softscope Llc | Virtual desktop - meta-organization & control system |
JP4171770B1 (ja) * | 2008-04-24 | 2008-10-29 | 任天堂株式会社 | オブジェクト表示順変更プログラム及び装置 |
EP2801016A1 (en) * | 2011-10-11 | 2014-11-12 | Serge Media Inc. | System and methods for content-search carousel for mobile-computing devices |
US8760474B2 (en) * | 2011-11-02 | 2014-06-24 | Microsoft Corporation | Virtualized data presentation in a carousel panel |
US10114524B2 (en) * | 2016-01-01 | 2018-10-30 | Google Llc | Graphical user interface for swappable item selection |
CN106997262A (zh) * | 2016-01-26 | 2017-08-01 | 广州市动景计算机科技有限公司 | 客户端界面加载控制方法、装置、客户端及移动终端 |
US20180067641A1 (en) * | 2016-09-01 | 2018-03-08 | PIQPIQ, Inc. | Social networking application for real-time selection and sorting of photo and video content |
-
2018
- 2018-08-24 CN CN201810972994.1A patent/CN110858154B/zh active Active
Patent Citations (7)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
US9798443B1 (en) * | 2013-09-10 | 2017-10-24 | Amazon Technologies, Inc. | Approaches for seamlessly launching applications |
WO2015109772A1 (zh) * | 2014-01-22 | 2015-07-30 | 华为技术有限公司 | 数据处理设备和数据处理方法 |
CN105988793A (zh) * | 2015-02-11 | 2016-10-05 | 阿里巴巴集团控股有限公司 | 用于屏幕显示设备的图像展示方法及装置 |
US9959009B1 (en) * | 2016-12-23 | 2018-05-01 | Beijing Kingsoft Internet Security Software Co., Ltd. | Method for displaying information, and terminal equipment |
CN107147940A (zh) * | 2017-05-05 | 2017-09-08 | 广州阿里巴巴文学信息技术有限公司 | 内容轮播的方法、装置、电子设备和存储介质 |
CN107302671A (zh) * | 2017-06-30 | 2017-10-27 | 北京金山安全软件有限公司 | 素材拼接处理方法、装置、电子设备及存储介质 |
CN107885814A (zh) * | 2017-11-06 | 2018-04-06 | 北京金风科创风电设备有限公司 | 显示轮播图的方法和装置 |
Also Published As
Publication number | Publication date |
---|---|
CN110858154A (zh) | 2020-03-03 |
Similar Documents
Publication | Publication Date | Title |
---|---|---|
CN112135059B (zh) | 拍摄方法、装置、电子设备和存储介质 | |
CN105955607B (zh) | 内容分享方法和装置 | |
CN110858154B (zh) | 一种轮播图的切换显示方法、装置、电子设备及存储介质 | |
US9423951B2 (en) | Content-based snap point | |
US20120249542A1 (en) | Electronic apparatus to display a guide with 3d view and method thereof | |
US20150135125A1 (en) | Bubble loupes | |
WO2020001234A1 (zh) | 文件夹图标显示方法、系统、可读存储介质及终端 | |
EP2887191A1 (en) | Picture display processing method and device | |
CN104808959B (zh) | 一种信息处理方法及电子设备 | |
CN105677224A (zh) | 一种下拉手势处理方法、装置及设备 | |
US20160077726A1 (en) | User interface based interaction method and related apparatus | |
CN106649639A (zh) | 一种页面显示方法及设备 | |
CN108905203B (zh) | 信息处理方法、装置、存储介质及电子装置 | |
US8990736B2 (en) | Fast cursor location | |
EP2947567A1 (en) | User interface text appearance customization | |
CN105022599A (zh) | 一种终端及终端屏幕显示方法 | |
CN112486611B (zh) | 页面切换显示方法、装置、存储介质及电子设备 | |
US20160078034A1 (en) | Method and apparatus for displaying media file on terminal by using page | |
JP2023540271A (ja) | ピクチャ処理方法、装置、デバイス及び記憶媒体 | |
JP2022500792A (ja) | 画像処理方法及び装置、電子機器並びに記憶媒体 | |
CN106156132B (zh) | 图片加载显示方法和装置 | |
CN109146783A (zh) | 一种图片拼接方法、装置、电子设备及介质 | |
CN112464301A (zh) | 一种图像显示方法及装置 | |
CN112383741B (zh) | 一种视频显示方法及装置 | |
CN105678696A (zh) | 一种信息处理方法及电子设备 |
Legal Events
Date | Code | Title | Description |
---|---|---|---|
PB01 | Publication | ||
PB01 | Publication | ||
SE01 | Entry into force of request for substantive examination | ||
SE01 | Entry into force of request for substantive examination | ||
GR01 | Patent grant | ||
GR01 | Patent grant |