自动轮换图片的方法
【技术领域】
[0001]本发明涉及图片显示领域，尤其涉及一种自动轮换图片的方法。
【背景技术】
[0002]jQueryMobile为前端开发的一个框架，主要应用于手机端的开发，该框架自带css库及jQuery库，将一个独立的页面分成多个page，在该框架下，自动轮换图片的插件无法获取所需要的width属性，导致多设备多分辨率下该插件无法自适应，jQueryMobile框架中自动轮换图片插件无法自适应各分辨率屏幕。在载入web页面时，使用document,body, clientffidth方法，获取浏览器的当前宽度，赋值给轮换图片，该方法只能在第一次载入web页面时生效，在不刷新web页面时无法重新获取浏览器的宽度，导致在最大化/最小化PC端浏览器或者切换手机横屏/竖屏时，图片宽度无法自适应。
【发明内容】
[0003]针对现有技术中存在的问题，本发明提供了一种自动轮换图片的方法，能够提高图片在电子设备中显示的清晰度。
[0004]本发明采用如下技术方案:
[0005]—种自动轮换图片的方法，应用于jQeury Mobile中，所述方法包括:
[0006]步骤S1，将图片轮换插件提取到jQeury Mobile框架之外，将所述图片轮换插件中的图片从背景中提取；
[0007]步骤S2，在所述jQeury Mobile框架中留出空白区域；
[0008]步骤S3，将所述图片轮换插件定位于所述空白区域中；
[0009]步骤S4，将提取的所述图片宽度设置为100%。
[0010]优选的，所述方法还包括:
[0011]步骤S0，于所述步骤S1之前，在web页面的html部分载入所述图片轮换插件。
[0012]优选的，所述步骤S1具体包括:
[0013]步骤S11，将所述html部分提取到jQeury Mobile框架之外。
[0014]优选的，所述步骤S1还包括:
[0015]步骤S12，将所述图片以<img>标签形式显示。
[0016]优选的，所述步骤S2具体包括:
[0017]步骤S21，用div标签在所述jQeury Mobile框架中留出空白区域。
[0018]优选的，所述步骤S3具体包括:
[0019]步骤S31，将所述图片轮换插件定位于使用所述div标签留出的空白区域中。
[0020]优选的，所述步骤S31具体包括:
[0021]步骤S311，采用absolute的样式方法，将所述图片轮换插件定位于使用所述div标签留出的空白区域中。
[0022]优选的，所述方法中，
[0023]所述空白区域的高度固定。
[0024]本发明的有益效果是:
[0025]本发明设计的轮换图片的兼容性较好，能够自适应所有的终端设备，包括PC和移动端；可以自适应所有的浏览器。并且能够实现jQeuryMobile框架中轮换图片插件中图片的自适应屏幕效果。
【附图说明】
[0026]图1为本发明自动轮换图片的方法的示意图；
[0027]图2为本发明中jQeuryMobile框架在轮换图片的示意图。
【具体实施方式】
[0028]需要说明的是，在不冲突的情况下，下述技术方案，技术特征之间可以相互组合。
[0029]下面结合附图对本发明的【具体实施方式】作进一步的说明:
[0030]如图1所示，一种自动轮换图片的方法，应用于jQeury Mobile中，所述方法包括:
[0031]步骤S1，将图片轮换插件提取到jQeury Mobile框架之外，将所述图片轮换插件中的图片从背景中提取；
[0032]步骤S2，在所述jQeury Mobile框架中留出空白区域；
[0033]步骤S3，将所述图片轮换插件定位于所述空白区域中；
[0034]步骤S4，将提取的所述图片宽度设置为100%。
[0035]本发明一个较佳的实施例中，所述方法还包括:
[0036]步骤S0，于所述步骤S1之前，在web页面的html部分载入所述图片轮换插件。
[0037]本发明一个较佳的实施例中，所述步骤S1具体包括:
[0038]步骤S11，将所述html部分提取到jQeury Mobile框架之外。
[0039]本发明一个较佳的实施例中，所述步骤S1还包括:
[0040]步骤S12，将所述图片以<img>标签形式显示。
[0041 ] 本发明一个较佳的实施例中，所述步骤S2具体包括:
[0042]步骤S21，用div标签在所述jQeury Mobile框架中留出空白区域。
[0043]本发明一个较佳的实施例中，所述步骤S3具体包括:
[0044]步骤S31，将所述图片轮换插件定位于使用所述div标签留出的空白区域中。
[0045]本发明一个较佳的实施例中，所述步骤S31具体包括:
[0046]步骤S311，采用absolute的样式方法，将所述图片轮换插件定位于使用所述div标签留出的空白区域中。
[0047]本发明一个较佳的实施例中，所述方法中，
[0048]所述空白区域的高度固定。
[0049]本实施例中，如图2所示，在web页面的html头部载入图片轮换插件swiper.js。将html部分提取到jQueryMobile框架的外面，并将插件中图片从背景提取为使用img标签直接显示。在jQeuryMobile框架中用div标签留出固定高度的空白区域。使用posit1n:absolute的样式方法将图片轮换插件定位在jQueryMobile使用div标签所留出的空白区域中。
[0050]综上所述，本发明将该部分插件提取到jQueryMobile框架以外，使用posit1n:absolute方法将该部分内容定位在web页面的最顶端，并将里面的图片以<img>标签形式展现，而不是背景，<img>标签中的图片只要设置width:100%就可自适应所有浏览器，并在切换浏览器大小时自适应屏幕。
[0051]通过说明和附图，给出了【具体实施方式】的特定结构的典型实施例，基于本发明精神，还可作其他的转换。尽管上述发明提出了现有的较佳实施例，然而，这些内容并不作为局限。
[0052]对于本领域的技术人员而言，阅读上述说明后，各种变化和修正无疑将显而易见。因此，所附的权利要求书应看作是涵盖本发明的真实意图和范围的全部变化和修正。在权利要求书范围内任何和所有等价的范围与内容，都应认为仍属本发明的意图和范围内。
【主权项】
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框架中留出空白区域；步骤S3，将所述图片轮换插件定位于所述空白区域中；步骤S4，将提取的所述图片宽度设置为100％。
【IPC分类】G06F17/30
【公开号】CN105389365
【申请号】CN201510759598
【发明人】黄小飞
【申请人】上海斐讯数据通信技术有限公司
【公开日】2016年3月9日
【申请日】2015年11月9日