标题+图片绚丽幻灯片JQ+CSS特效-会学html CSS

标题+图片绚丽幻灯片JQ+CSS特效

此特效为JQ+div+css的幻灯片特效,标题+焦点+图片幻灯片JQ特效。标题背景为半透明,漂亮幻灯片。

此特效为JQ+div+css的幻灯片特效,标题+焦点+图片幻灯片JQ特效。标题背景为半透明,漂亮幻灯片。

幻灯片效果截图
JS+cSS幻灯片效果截图

此幻灯片为非常常用的幻灯片特效,标题文字+图片+焦点1 2 3数字,并且标题文字背景半透明

使用说明:修改对应CSS+JS代码设置好宽度、高度即可适用你的CSS项目,兼容各大浏览器。

  1. <script type="text/javascript">  
  2. $(function(){ 
  3.     new slide("#main-slide","cur",370,220,1);//焦点图 宽度、高度设置
  4. }) 
  5. function $jquery(id){return document.getElementById(id)}; 
  6. </script> 

以上为HTML中特效JS片段需要注意宽度高度设置。

  1. .slide{overflow:hidden;_float:left;zoom:1; margin:0 auto; width:370px} 
  2.  
  3. /* 默认幻灯片 */ 
  4. .FocusPic{zoom:1;position:relative; overflow:hidden} 
  5. .FocusPic .content{overflow:hidden} 
  6. .FocusPic .changeDiv a{position:absolute;top:0px;left:0px;display:none;} 
  7. .FocusPic .subjectg,.FocusPic .title{position:absolute;left:0px;bottom:0;
     text-align:left;width:370px;height:30px;line-height:30px;overflow:hidden} 
  8. .FocusPic .subjectg{background:#000;filter:alpha(opacity=50);opacity:0.5;} 
  9. .FocusPic .title a{display:block;padding-left:15px;color:#fff; font-size:14px;} 
  10. .FocusPic .change{bottom:4px;height:20px;right:3px;*right:5px;_right:4px;position:absolute;
    text-align:right;z-index:9999;} 
  11. .FocusPic .change i {background:#666;color:#FFF;cursor:pointer;font-family:Arial;font-size:12px;
    line-height:15px;margin-right:2px;padding:2px 6px; font-style:normal; height:15px;display:inline-block;
    display:-moz-inline-stack;zoom:1;*display:inline;} 
  12. .FocusPic .change i.cur {background:#FF7700;} 

以上CSS代码为此特效CSS代码,根据需求修改对应即可。

在线演示:查看案例

在线打包下载:

更新