自动轮换图片的方法技术

本发明专利技术涉及图片显示领域，尤其涉及一种自动轮换图片的方法。一种自动轮换图片的方法，应用于jQeury Mobile中，所述方法包括：步骤S1，将图片轮换插件提取到jQeury Mobile框架之外，将所述图片轮换插件中的图片从背景中提取；步骤S2，在所述jQeury Mobile框架中留出空白区域；步骤S3，将所述图片轮换插件定位于所述空白区域中；步骤S4，将提取的所述图片宽度设置为100％。

【技术实现步骤摘要】

本专利技术涉及图片显示领域，尤其涉及一种。
技术介绍
jQueryMobile为前端开发的一个框架，主要应用于手机端的开发，该框架自带css库及jQuery库，将一个独立的页面分成多个page，在该框架下，自动轮换图片的插件无法获取所需要的width属性，导致多设备多分辨率下该插件无法自适应，jQueryMobile框架中自动轮换图片插件无法自适应各分辨率屏幕。在载入web页面时，使用document,body, clientffidth方法，获取浏览器的当前宽度，赋值给轮换图片，该方法只能在第一次载入web页面时生效，在不刷新web页面时无法重新获取浏览器的宽度，导致在最大化/最小化PC端浏览器或者切换手机横屏/竖屏时，图片宽度无法自适应。
技术实现思路
针对现有技术中存在的问题，本专利技术提供了一种，能够提高图片在电子设备中显示的清晰度。本专利技术采用如下技术方案:—种，应用于jQeury Mobile中，所述方法包括:步骤S1，将图片轮换插件提取到jQeury Mobile框架之外，将所述图片轮换插件中的图片从背景中提取；步骤S2，在所述jQeury Mobile框架中留出空白区域；步骤S3，将所述图片轮换插件定位于所述空白区域中；步骤S4，将提取的所述图片宽度设置为100%。优选的，所述方法还包括:步骤S0，于所述步骤S1之前，在web页面的html部分载入所述图片轮换插件。优选的，所述步骤S1具体包括:步骤S11，将所述html部分提取到jQeury Mobile框架之外。优选的，所述步骤S1还包括:步骤S12，将所述图片以<img>标签形式显示。优选的，所述步骤S2具体包括:步骤S21，用div标签在所述jQeury Mobile框架中留出空白区域。优选的，所述步骤S3具体包括:步骤S31，将所述图片轮换插件定位于使用所述div标签留出的空白区域中。优选的，所述步骤S31具体包括:步骤S311，采用absolute的样式方法，将所述图片轮换插件定位于使用所述div标签留出的空白区域中。优选的，所述方法中，所述空白区域的高度固定。本专利技术的有益效果是:本专利技术设计的轮换图片的兼容性较好，能够自适应所有的终端设备，包括PC和移动端；可以自适应所有的浏览器。并且能够实现jQeuryMobile框架中轮换图片插件中图片的自适应屏幕效果。【附图说明】图1为本专利技术的示意图；图2为本专利技术中jQeuryMobile框架在轮换图片的示意图。【具体实施方式】需要说明的是，在不冲突的情况下，下述技术方案，技术特征之间可以相互组合。下面结合附图对本专利技术的【具体实施方式】作进一步的说明:如图1所示，一种，应用于jQeury Mobile中，所述方法包括:步骤S1，将图片轮换插件提取到jQeury Mobile框架之外，将所述图片轮换插件中的图片从背景中提取；步骤S2，在所述jQeury Mobile框架中留出空白区域；步骤S3，将所述图片轮换插件定位于所述空白区域中；步骤S4，将提取的所述图片宽度设置为100%。本专利技术一个较佳的实施例中，所述方法还包括:步骤S0，于所述步骤S1之前，在web页面的html部分载入所述图片轮换插件。本专利技术一个较佳的实施例中，所述步骤S1具体包括:步骤S11，将所述html部分提取到jQeury Mobile框架之外。本专利技术一个较佳的实施例中，所述步骤S1还包括:步骤S12，将所述图片以<img>标签形式显示。 本专利技术一个较佳的实施例中，所述步骤S2具体包括:步骤S21，用div标签在所述jQeury Mobile框架中留出空白区域。本专利技术一个较佳的实施例中，所述步骤S3具体包括:步骤S31，将所述图片轮换插件定位于使用所述div标签留出的空白区域中。本专利技术一个较佳的实施例中，所述步骤S31具体包括:步骤S311，采用absolute的样式方法，将所述图片轮换插件定位于使用所述div标签留出的空白区域中。本专利技术一个较佳的实施例中，所述方法中，所述空白区域的高度固定。本实施例中，如图2所示，在web页面的html头部载入图片轮换插件swiper.js。将html部分提取到jQueryMobile框架的外面，并将插件中图片从背景提取为使用img标签直接显示。在jQeuryMobile框架中用div标签留出固定高度的空白区域。使用posit1n:absolute的样式方法将图片轮换插件定位在jQueryMobile使用div标签所留出的空白区域中。综上所述，本专利技术将该部分插件提取到jQueryMobile框架以外，使用posit1n:absolute方法将该部分内容定位在web页面的最顶端，并将里面的图片以<img>标签形式展现，而不是背景，<img>标签中的图片只要设置width:100%就可自适应所有浏览器，并在切换浏览器大小时自适应屏幕。通过说明和附图，给出了【具体实施方式】的特定结构的典型实施例，基于本专利技术精神，还可作其他的转换。尽管上述专利技术提出了现有的较佳实施例，然而，这些内容并不作为局限。对于本领域的技术人员而言，阅读上述说明后，各种变化和修正无疑将显而易见。因此，所附的权利要求书应看作是涵盖本专利技术的真实意图和范围的全部变化和修正。在权利要求书范围内任何和所有等价的范围与内容，都应认为仍属本专利技术的意图和范围内。【主权项】1.一种，其特征在于，应用于jQeury Mobile中，所述方法包括: 步骤S1，将图片轮换插件提取到jQeury Mobile框架之外，将所述图片轮换插件中的图片从背景中提取； 步骤S2，在所述jQeury Mobile框架中留出空白区域； 步骤S3，将所述图片轮换插件定位于所述空白区域中； 步骤S4，将提取的所述图片宽度设置为100%。2.根据权利要求1所述的，其特征在于，所述方法还包括: 步骤S0，于所述步骤S1之前，在web页面的html部分载入所述图片轮换插件。3.根据权利要求2所述的，其特征在于，所述步骤S1具体包括: 步骤S11，将所述html部分提取到jQeury Mobile框架之外。4.根据权利要求1所述的，其特征在于，所述步骤S1还包括: 步骤S12，将所述图片以<img>标签形式显示。5.根据权利要求1所述的，其特征在于，所述步骤S2具体包括: 步骤S21，用div标签在所述jQeury Mobile框架中留出空白区域。6.根据权利要求5所述的，其特征在于，所述步骤S3具体包括: 步骤S31，将所述图片轮换插件定位于使用所述div标签留出的空白区域中。7.根据权利要求6所述的，其特征在于，所述步骤S31具体包括: 步骤S311，采用absolute的样式方法，将所述图片轮换插件定位于使用所述div标签留出的空白区域中。8.根据权利要求1所述的，其特征在于，所述方法中， 所述空白区域的高度固定。【专利摘要】本专利技术涉及图片显示领域，尤其涉及一种。一种，应用于jQeury？Mobile中，所述方法包括：步骤S1，将图片轮换插件提取到jQeury？Mobile框架之外，将所述图片轮换插件中的图片从背景中提取；步骤S2，在所述jQeury？Mobile框架中留本文档来自技高网...

【技术保护点】
一种自动轮换图片的方法，其特征在于，应用于jQeury Mobile中，所述方法包括：步骤S1，将图片轮换插件提取到jQeury Mobile框架之外，将所述图片轮换插件中的图片从背景中提取；步骤S2，在所述jQeury Mobile框架中留出空白区域；步骤S3，将所述图片轮换插件定位于所述空白区域中；步骤S4，将提取的所述图片宽度设置为100％。

【技术特征摘要】

【专利技术属性】
技术研发人员：黄小飞，
申请(专利权)人：上海斐讯数据通信技术有限公司，
类型：发明
国别省市：上海;31