CSS手册CSS3手册Edu网闻
欢迎来到thinkcss查找CSS资料与学习DIV CSS布局技术!
您的位置:ThinkCSS首页 > CSS特效 >

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

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

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

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

一、全屏幻灯片特效特点:   -   TOP

1、此特效才有jquery+DIV+CSS架构的特效
2、全屏100%宽,自适应浏览器宽度全屏幻灯片特效
3、可点击左右按钮选择上一条和下一条幻灯片内容
4、有居中的焦点,可点击焦点查看对应幻灯片内容


Jq+div+css布局幻灯片效果特效截图

二、ThinkCSS帮你理解此特效:   -   TOP

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

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

三、使用注意:   -   TOP

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

四、演示与下载   -   TOP

1、在线演示:

查看案例

2、打包下载(2014-12-14日修改最新版):

 

如需转载,请注明文章出处和来源网址:http://www.thinkcsss.com/css-texiao/texiao717.shtml

CSS基础教程 CSS Based Tutorial

HTML基础教程 HTML Based Tutorial

CSS教程文章修订日期:2014-06-21 23:26 www.thinkcss.com div css。