让phpcms中的幻灯片宽度自适应终端设备

  • A+
所属分类:CMS

经常使用phpcms的童鞋们都知道,系统集成的幻灯片功能很好用,尽管代码很老了。

1、引用js

2、html代码

其中FocusPic、main-slid、changeDiv是必须的,将需要切换的焦点图及内容包在里面即可。
样式表中的change是焦点图切换的按钮,是由后台动态生成的,只需要规定好样式就行了。

3、调用方法

“#main-slide”代表包裹焦点图的内容。

“cur”是按钮切换增加的样式。

1000,260,分别是焦点图的宽和高。

4、问题

现在的网站一般都是终端自适应的,但使用上述方法调用的幻灯片的宽度却不能自动随终端设备的尺寸变化而变化。检查代码发现:

如果把slide函数中的宽度参数的值改为“100%”,则系统报错,幻灯片不显示。那如何才能实现幻灯片的宽度值由px变百分比呢?

检查jquery.sgallery.js中的slide函数

原来是因为$(Name).width(Width); $(Name).height(Height);从而生成了style="width: 1000px; height: 260px;"

这就好办了。

我用了一个笨办法:对width的值进行判断,如果等于0,则……

嘿,管用了。


如果您有什么更好的办法,不妨留言讨论一下哦。

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: