[0028] 需要说明的是,在不冲突的情况下,下述技术方案,技术特征之间可以相互组合。
[0029] 下面结合附图对本发明的具体实施方式作进一步的说明:
[0030] 如图1所示,一种自动轮换图片的方法,应用于jQuery Mobile中,所述方法包括:
[0031] 步骤S1,将图片轮换插件提取到jQuery Mobile框架之外,将所述图片轮换插件中的图片从背景中提取;
[0032] 步骤S2,在所述jQuery Mobile框架中留出空白区域;
[0033] 步骤S3,将所述图片轮换插件定位于所述空白区域中;
[0034] 步骤S4,将提取的所述图片宽度设置为100%。
[0035] 本发明一个较佳的实施例中,所述方法还包括:
[0036] 步骤S0,于所述步骤S1之前,在web页面的html部分载入所述图片轮换插件。
[0037] 本发明一个较佳的实施例中,所述步骤S1具体包括:
[0038] 步骤S11,将所述html部分提取到jQuery Mobile框架之外。
[0039] 本发明一个较佳的实施例中,所述步骤S1还包括:
[0040] 步骤S12,将所述图片以
标签形式显示。
[0041] 本发明一个较佳的实施例中,所述步骤S2具体包括:
[0042] 步骤S21,用div标签在所述jQuery Mobile框架中留出空白区域。
[0043] 本发明一个较佳的实施例中,所述步骤S3具体包括:
[0044] 步骤S31,将所述图片轮换插件定位于使用所述div标签留出的空白区域中。
[0045] 本发明一个较佳的实施例中,所述步骤S31具体包括:
[0046] 步骤S311,采用absolute的样式方法,将所述图片轮换插件定位于使用所述div标签留出的空白区域中。
[0047] 本发明一个较佳的实施例中,所述方法中,
[0048] 所述空白区域的高度固定。
[0049] 本实施例中,如图2所示,在web页面的html头部载入图片轮换插件swiper.js。将html部分提取到jQueryMobile框架的外面,并将插件中图片从背景提取为使用img标签直接显示。在jQueryMobile框架中用div标签留出固定高度的空白区域。使用position:absolute的样式方法将图片轮换插件定位在jQueryMobile使用div标签所留出的空白区域中。
[0050] 综上所述,本发明将该部分插件提取到jQueryMobile框架以外,使用position:absolute方法将该部分内容定位在web页面的最顶端,并将里面的图片以
标签形式展现,而不是背景,
标签中的图片只要设置width:100%就可自适应所有浏览器,并在切换浏览器大小时自适应屏幕。
[0051] 通过说明和附图,给出了具体实施方式的特定结构的典型实施例,基于本发明精神,还可作其他的转换。尽管上述发明提出了现有的较佳实施例,然而,这些内容并不作为局限。
[0052] 对于本领域的技术人员而言,阅读上述说明后,各种变化和修正无疑将显而易见。因此,所附的权利要求书应看作是涵盖本发明的真实意图和范围的全部变化和修正。在权利要求书范围内任何和所有等价的范围与内容,都应认为仍属本发明的意图和范围内。