人靠衣装,机靠壳装

支付宝首页全屏自适应宽度可点击切换焦点图幻灯片

2018-04-22 10:50 发布

00
admin
未来城市
  • 粉丝0

  • 关注0

  • 动态1

全屏自适应宽可点击左右和焦点的自动切换幻灯片特效_niuqiqi080930.jpg


Jq+div+css布局幻灯片效果特效,百分百自适应宽度自适应浏览器宽度焦点+可点击左右按钮幻灯片特效,兼容各大浏览器。特别修改后兼任IE6浏览器,左右按钮图片显示位置正确。


100%全屏宽可点击左右和焦点的自动切换幻灯片特效


兼容各大浏览器是扣支付宝官网首页左右全屏banner焦点幻灯片jquery特效。


1、此特效才有jquery+DIV+CSS架构的特效

2、全屏100%宽,自适应浏览器宽度全屏幻灯片特效

3、可点击左右按钮选择上一条和下一条幻灯片内容

4、有居中的焦点,可点击焦点查看对应幻灯片内容



此特效使用JQ实现,并采用div+css布局,而html幻灯片切换图片非常简单简洁;同时图片做在li背景,通过对li设置100%宽度,让幻灯片自适应浏览器分辨率宽度。只需要做好足够宽的幻灯片图片即可。


幻灯片特点:图片作为li的背景后可以控制li宽度100%,实现背景图片根据li随浏览器宽度而自动适应,同时设置了对li里的a链接内容生效并隐藏超链接内容(CSS实现隐藏背景图片上方文字而超链接仍然生效)



此特效可控制css高度,更改对应幻灯片css高度,可更换你自己风格的焦点图标和左右点击的按钮图片,同时制作幻灯片的图片内容时,需要做足够宽的图片(必须设计制作的图片要比大部分浏览用户显示器分辨率宽,最好做到2500px宽度图片),并且高度均保持一致和CSS里设置幻灯片高度保持一致。


授权方式:共享版

适合环境: Chrome/Firefox/Opera/Safari/IE9+

猜你喜欢
更多发现
子导航JS代码