一种轮播图设置方法及系统技术方案

技术编号:15436946 阅读:226 留言:0更新日期:2017-05-25 19:10
本申请公开了一种轮播图设置方法,包括:接收控制台发送的轮播图,其中,轮播图中包括图片集;按照控制台设定的背景图片加载顺序,加载图片集中的背景图片;加载控制台添加到图片集中的可添加元素集。可见,本申请用户终端通过接收控制台发送的轮播图,能够显示出经过控制台自定义过的轮播图,不再需要web前端开发工程师手动修改代码,直接通过控制台便可修改轮播图中的背景图片和动画效果等,使用户终端能够加载出自定义轮播图中的各种动画,且利用预先设定的加载顺序,使得用户终端不用一次性下载全部图片,可以提前预览轮播图的部分图片,达到了快速展示的效果。另外,本申请还相应公开了一种轮播图设置系统。

A carousel figure setting method and system

The invention discloses a method for setting, carousel figure includes: receiving the console to send the carousel figure, the carousel figure including pictures set; according to the background image loading sequence console set, load the image focusing on the background picture; loading console added to the photo collection to add the element set. Obviously, the application user terminal by receiving the console to send the carousel map, can be displayed through the custom console carousel figure, no longer need to manually modify the web front-end development engineer directly through the code, you can modify the console carousel figure in the background images and animations, the user terminal can be loaded with a variety of custom animation carousel figure the use and the preset loading sequence, the user terminal without one-time Download all the pictures, some pictures can preview carousel map, to achieve a fast display effect. In addition, the invention also discloses a corresponding system settings carousel figure.

【技术实现步骤摘要】
一种轮播图设置方法及系统
本专利技术涉及网页制作领域,特别涉及一种轮播图设置方法及系统。
技术介绍
作为一个企业的互联网支撑服务平台,跟大部分的官方网站一样,轮播图是必不可少的元素。官网中的轮播图占据了网页的一大部分位置,用于实时显示最新的动态与活动。轮播图的切换,通常是通过左右滑动来达到显示下一张图片的效果。其切换的左右滑动的动画是通过css3(CSS,CascadingStyleSheet,层叠样式表)动画实现,即为轮播图的附标签添加了一个过渡的动画属性,在即将切换的时候设置其css中的left属性,则该附标签就会按照一定属性描画出轨迹进行运动,从而形成了切换动画。现有技术中,轮播的图片都是一次性全部加载,从而可能导致想显示出来的图片未下载完成,暂时不需要显示的图片却已下载,且官网上的轮播图的切换动画是固定了的左右滑动的切换方式,这种动画比较普通,用户接触久了会有一种疲劳感,尤其是控制台的内容管理,只能单纯地上传一张张的图片和修改图片的顺序,因此为了达到修改轮播图效果,需要web前端开发工程师上线手动修改代码。
技术实现思路
有鉴于此,本专利技术的目的在于提供一种轮播图设置方法,使终端能够接收通过控制台修改轮播图效果,不再需要web前端开发工程师手动修改代码。其具体方案如下:一种轮播图设置方法,包括:接收控制台发送的轮播图,其中,所述轮播图中包括图片集;按照所述控制台设定的背景图片加载顺序,加载所述图片集中的背景图片;加载所述控制台添加到所述图片集中的可添加元素集。优选的,所述加载所述控制台添加到所述图片集中的可添加元素集,包括:加载所述图片集中与每一背景图片一一对应的所述可添加元素集中的一组可添加元素。优选的,所述加载所述控制台添加到所述图片集中的可添加元素集,包括:加载所述图片集中与任意背景图片对应的所述可添加元素集中的可添加元素。优选的,所述可添加元素包括:小图片和/或所述小图片的动画。优选的,所述加载所述控制台添加到所述图片集中的可添加元素集,包括:获取对所述可添加元素的排序方式,利用所述可添加元素的排序方式,依序加载所述可添加元素。优选的,所述加载所述控制台添加到所述图片集中的可添加元素集,包括:获取所述可添加元素的权重,利用所述可添加元素的权重,依序加载所述可添加元素。优选的,所述加载所述控制台添加到所述图片集中的可添加元素集,包括:获取所述可添加元素的文件大小,利用所述可添加元素的文件大小,按照所述文件大小从小到大的顺序,依序加载所述可添加元素。本专利技术还公开了一种轮播图设置系统,包括:轮播图接收模块,用于接收控制台发送的轮播图,其中,所述轮播图中包括图片集;图片加载模块,用于按照所述控制台设定的背景图片加载顺序,加载所述图片集中的背景图片;元素加载模块,用于加载所述控制台添加到所述图片集中的可添加元素集。优选的,所述元素加载模块,具体用于加载所述控制台添加到所述图片集中与每一背景图片一一对应的所述可添加元素集中的一组可添加元素。优选的,所述元素加载模块,具体用于加载所述图片集中与任意背景图片对应的所述可添加元素集中的可添加元素。本专利技术中,轮播图设置方法,包括:接收控制台发送的轮播图,其中,轮播图中包括图片集;按照控制台设定的背景图片加载顺序,加载图片集中的背景图片;加载控制台添加到图片集中的可添加元素集。可见,本专利技术用户终端通过接收控制台发送的轮播图,能够显示出经过控制台自定义过的轮播图,不再需要web前端开发工程师手动修改代码,直接通过控制台便可修改轮播图中的背景图片和动画效果等,使用户终端能够加载出自定义轮播图中的各种动画,且利用预先设定的加载顺序,使得用户终端不用一次性下载全部图片,可以提前预览轮播图的部分图片,达到了快速展示的效果。附图说明为了更清楚地说明本专利技术实施例或现有技术中的技术方案,下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍,显而易见地,下面描述中的附图仅仅是本专利技术的实施例,对于本领域普通技术人员来讲,在不付出创造性劳动的前提下,还可以根据提供的附图获得其他的附图。图1为本专利技术实施例提供的一种轮播图设置方法流程示意图;图2为本专利技术实施例提供的另一种轮播图设置方法流程示意图;图3为本专利技术实施例提供的另一种轮播图设置方法流程示意图;图4为本专利技术实施例提供的另一种轮播图设置方法流程示意图;图5为本专利技术实施例提供的一种轮播图设置系统结构示意图。具体实施方式下面将结合本专利技术实施例中的附图,对本专利技术实施例中的技术方案进行清楚、完整地描述,显然,所描述的实施例仅仅是本专利技术一部分实施例,而不是全部的实施例。基于本专利技术中的实施例,本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例,都属于本专利技术保护的范围。本专利技术实施例公开了一种轮播图设置方法,参见图1所示,该方法包括:步骤S11:接收控制台发送的轮播图,其中,轮播图中包括图片集。具体的,用户终端接收由控制台发送的轮播图,其中,轮播图为管理员经过控制台制作而成的。步骤S12:按照控制台设定的背景图片加载顺序,加载图片集中的背景图片。具体的,管理员上传图片集到控制台中,图片集中包含至少一个背景图片,控制台创建图层,按照管理员输入的背景图片顺序,将图片集中的背景图片依序放入图层中,使得用户终端能够依据背景图片加载顺序,依序加载图片集中的背景图片。可以理解的是,管理员不仅可以通过控制台创建新的图层,来添加背景图片,也可以修改已经存在的图层,可以调整已保存的图层中的背景图片显示顺序和切换动画的顺序。需要说明的是,由于添加了背景图片的加载顺序,使得用户终端接收图片时,不再需要一次性下载完整张轮播图,而是依序的一张一张的下载,使得用户能够提前浏览到轮播图的部分图片,达到了快速展示的效果,提升了用户体验。步骤S13:加载控制台添加到图片集中的可添加元素集。具体的,用户终端加载控制台添加到图片集中的可添加元素集,可添加元素集是管理员在控制台添加或修改完背景图片后添加的,可添加元素是可以根据实际应用需求进行添加的,如果没有可添加元素,当然也可以不进行添加,直接使用背景图片生成轮播图;如果有,则可以在背景图片上添加可添加元素。例如,选择一张背景图片,并在该背景图片上添加可添加元素,可添加元素可以包括小图片和/或小图片的动画等元素,在背景图片上为小图片选择添加位置,并进行添加,判断是否有必要继续为小图片添加小图片的动画路径,如果不进行添加,则将使用默认动画路径进行设置,如果进行添加,则选中需要添加的小图片,对该小图片的动画路径进行设置,如该图片切换方式为水平方向滑出界面。可以理解的是,可以在一张背景图片上添加多种可添加元素,已达到丰富页面内容的效果,同时可以在轮播图中的多张背景图片中添加可添加元素,而不只局限于一张。可见,本专利技术实施例用户终端通过接收控制台发送的轮播图,能够显示出经过控制台自定义过的轮播图,不再需要web前端开发工程师手动修改代码,直接通过控制台便可修改轮播图中的背景图片和动画效果等,使用户终端能够加载出自定义轮播图中的各种动画,且利用预先设定的加载顺序,使得用户终端不用一次性下载全部图片,可以提前预览轮播图的部分图片,达到了快速展示的效果。本专利技术实施例公开了一种具体的轮播图设置方法,相对于上一实施例,本实施例本文档来自技高网...
一种轮播图设置方法及系统

【技术保护点】
一种轮播图设置方法,其特征在于,包括:接收控制台发送的轮播图,其中,所述轮播图中包括图片集;按照所述控制台设定的背景图片加载顺序,加载所述图片集中的背景图片;加载所述控制台添加到所述图片集中的可添加元素集。

【技术特征摘要】
1.一种轮播图设置方法,其特征在于,包括:接收控制台发送的轮播图,其中,所述轮播图中包括图片集;按照所述控制台设定的背景图片加载顺序,加载所述图片集中的背景图片;加载所述控制台添加到所述图片集中的可添加元素集。2.根据权利要求1所述的轮播图设置方法,其特征在于,所述加载所述控制台添加到所述图片集中的可添加元素集,包括:加载所述图片集中与每一背景图片一一对应的所述可添加元素集中的一组可添加元素。3.根据权利要求1所述的轮播图设置方法,其特征在于,所述加载所述控制台添加到所述图片集中的可添加元素集,包括:加载所述图片集中与任意背景图片对应的所述可添加元素集中的可添加元素。4.根据权利要求1所述的轮播图设置方法,其特征在于,所述可添加元素包括:小图片和/或所述小图片的动画。5.根据权利要求1至4任一项所述的轮播图设置方法,其特征在于,所述加载所述控制台添加到所述图片集中的可添加元素集,包括:获取对所述可添加元素的排序方式,利用所述可添加元素的排序方式,依序加载所述可添加元素。6.根据权利要求5所述的轮播图设置方法,其特征在于,所述...

【专利技术属性】
技术研发人员:黄晓佳胡博
申请(专利权)人:金蝶软件中国有限公司
类型:发明
国别省市:广东,44

网友询问留言 已有0条评论
  • 还没有人留言评论。发表了对其他浏览者有用的留言会获得科技券。

1