欢迎来到DIVCSS5查找CSS资料与学习DIV CSS布局技术!
您的位置:DIVCSS5首页 > CSS特效 >

JQ+CSS+DIV自动切换图文幻灯片特效

简单大方DIV+CSS+JQ自动切换图文幻灯片特效

CSS幻灯片效果截图
DIV+JS幻灯片特效效果截图

一、特效介绍   -   TOP

CSS幻灯片特效可用于企业站、门户自动切换广告幻灯片,本幻灯片特效非FLASH,是完全DIV+CSS+JS版特效。幻灯片切换的图片和文字可自由修改添加删除等操作。

1、此幻灯片CSS代码

  1. #slideshow{position:relative;height:195px;width:425px;
    border:10px solid #ddd;margin:0 auto 15px;} 
    /* css注释: 为了能显示完整所以对CSS代码进行换行 */
  2. #slideshow div{position:absolute;top:0;left:0;z-index:8;
    opacity:0.0;height:195px;overflow:hidden;background-color:#FFF;} 
  3. #slideshow div.current{z-index:10;} 
  4. #slideshow div.prev{z-index:9;} 
  5. #slideshow div img{display:block;border:0;margin-bottom:10px;} 
  6. #slideshow div span{display:none;position:absolute;bottom:0;left:0;
    height:50px;line-height:50px;background:#000;color:#fff;width:100%;} 
  7. #slideshow div.current span{display:block;} 

2、HTML代码片段截图

html代码截图
代码 截图

可见此幻灯片完全可以修改图片与不同文字包括html a超链接地址。

二、使用帮助   -   TOP

这里需要注意此幻灯片特效使用了jQuery库,也就是大家所说的JQ特效,所以在使用时候注意JS文件引入html文件里。

JQ引入与JS代码截图
JQ引入与部分放入html网页中JS代码截图

使用时候别忘记此段JS代码与html引入JS文件

使用时候只需设置CSS widthcss height和替换html img图片即可改造成达到自己所需幻灯片CSS特效

扩展知识html中引入css文件

三、演示与打包下载   -   TOP

在线演示http://www.divcss5.com/yanshi/2013030707/
完整网页源代码打包下载

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

我要分享到:

必备CSS教程 Essential CSS Tutorials

必备HTML基础教程 Essential HTML Tutorials

如对文章有任何疑问请提交到DIV CSS论坛,或有任何网页制作CSS问题立即到CSS论坛发贴求解 或 直接DIVCSS5网页顶部搜索遇到DIVCSS疑问。
CSS教程文章修订日期:2013-03-07 23:31 原创:DIVCSS5
本文www.divcss5.com DIVCSS5版权所有。