JQ+js插件的css+div图文焦点幻灯片特效，可选取焦点任意选择幻灯片内容，幻灯片文字内容背景为半透明浮于图片上方，图文使用div+css布局利用优化。可根据需求更改css达到想要的宽度、高度效果适合自己css布局需求。

DIV+CSS+JS特效之文字背景半透明焦点幻灯片特效

本特效可更加自己需求进行更改，比如特效宽度、高度、边框等样式实现自己所需的布局，图文分开于html代码中，可直接程序实现规律替换更改。

本特效特点，幻灯片图文中的文字部分背景为半透明，悬浮于图片上方，极其美观大方。

关于半透明 透明相关文章：
1、CSS背景半透明
2、ie6 png透明

HTML源代码部分：

<div class="w310"> 
<!--foucs--> 
<div id="fsD1" class="flash"> 
    <div id="D1pic1" class="fPic" bossZone="PicFocus"> 
        <div class="fcon"> <a target="_blank" href="#"> <img alt="泸州一信鸽坠落死亡"
 src="images/90464702.jpg" width="310" height="228" /></a> 
<span class="shadow"> <a target="_blank" href="#">泸州一信鸽坠落死亡 "同伴"苦守不离</a></span> </div> 
        <div class="fcon"> <a target="_blank" href="#"> 
<img alt="芦山灾区儿童普通画作拍卖 拍出近万元" src="images/90716307.jpg" width="310" height="228" /></a>
 <span class="shadow"> <a target="_blank" href="#">芦山灾区儿童普通画作拍卖 拍出近万元</a></span> </div> 
        <div class="fcon"> <a target="_blank" href="# ">
<img alt="重庆1000" src="images/90635572.jpg" height="228" /></a>
<span class="shadow"> <a target="_blank" href="#">娱乐场所</a></span> </div> 
         
        <div class="fcon"> <a target="_blank" href="#"> <img alt="拉豪车接送"  
 src="images/ds111111111111111111111111.jpg" width="310" height="228" /></a>
<span class="shadow"> <a target="_blank" href="#">法拉豪车接送 疑与富二代男友复合</a></span> </div> 
  
        <div class="fcon"> <a target="_blank" href="#">
<img alt="自驾攻略：每张照片都可以当桌面" src="images/u3.jpg" width="310" height="228" /></a>
<span class="shadow"><a target="_blank" href="#">自驾西藏全攻略：每张照片都可以当桌面</a></span> </div> 
        <div class="fcon"> <a target="_blank" href="#">
<img alt="为爱减肥25斤 终于穿上婚纱去结婚了" src="images/90747538.jpg" width="310" height="228" /></a>
<span class="shadow"><a target="_blank" href="#">为爱减肥25斤 终于穿上婚纱去结婚了</a></span> </div> 
         
    </div> 
    <div class="fbg"> 
        <div class="D1fBt" id="D1fBt"> <a href="javascript:void(0)" hidefocus="true" target="_self">
<i>1</i></a> <a href="javascript:void(0)" hidefocus="true" target="_self"><i>2</i></a>
<a href="javascript:void(0)" hidefocus="true" target="_self"><i>3</i></a>
<a href="javascript:void(0)" hidefocus="true" target="_self"><i>4</i></a>
<a href="javascript:void(0)" hidefocus="true" target="_self"><i>5</i></a>
<a href="javascript:void(0)" hidefocus="true" target="_self"><i>6</i></a>  
<!--  <a href="javascript:void(0)" hidefocus="true" target="_self"><i>7</i></a>--> </div> 
    </div> 
</div> 
</div> 

在线演示：查看案例

幻灯片特效打包下载：

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