本自动幻灯片特效为图片+文字+可选择焦点幻灯片特效，采用jquery+DIV+CSS实现的幻灯片特效。

CSS+DIV图文焦点幻灯片特效效果截图

本特效采用了JQ库的幻灯片特效，兼容各大浏览器，图片和文字均由DIV CSS布局，方便SEO优化布局，具有规律性，让大家更好程序来设施。

对应HTML代码中DIV部分：

<div class="w310"> 
    <div class="foucs"> 
     
        <div id="foucs_con_1"> <a href="#"target="_blank">
<img src="images/ds111111111111111111111111.jpg" width="300" height="210" /></a> 
            <h2><a href="http://www.divcss5.com/" target="_blank">DIVCSS5学习CSS布局技术</a></h2> 
        </div> 
         
        <div id="foucs_con_2" class="undis"> <a href="#" target="_blank">
<img src="images/90635572.jpg" width="300" height="210" /></a> 
            <h2><a href="#"target="_blank">保时捷最便宜SUV将投产 约合人民币36.6万</a></h2> 
        </div> 
         
        <div id="foucs_con_3" class="undis"> <a href="#" target="_blank">
<img src="images/90464702.jpg" width="300" height="210" /></a> 
            <h2><a href="#" target="_blank">多款重量级车型 2013成都车展参观指南 </a></h2> 
        </div> 
        <div id="foucs_con_4" class="undis"> <a href="#" target="_blank">
<img src="images/90716307.jpg" width="300" height="210" /></a> 
            <h2><a href="#" target="_blank">上海大众Polo Day正点派对成都站即将上演 </a></h2> 
        </div> 
        <div id="foucs_con_5" class="undis"> <a href="#" target="_blank">
<img src="images/90635572.jpg" width="300" height="210" /></a> 
            <h2><a href="#"target="_blank">保时捷最便宜SUV将投产 约合人民币36.6万</a></h2> 
        </div> 
         
        <div class="num"> 
            <ul> 
                <li class="on" id="foucs_tab_1" onmouseover="foucs(1,2,'foucs')"></li> 
                <li id="foucs_tab_2" onmouseover="foucs(2,2,'foucs')"></li> 
                <li id="foucs_tab_3" onmouseover="foucs(3,2,'foucs')"></li> 
                <li id="foucs_tab_4" onmouseover="foucs(4,2,'foucs')"></li> 
                <li id="foucs_tab_5" onmouseover="foucs(5,2,'foucs')"></li> 
            </ul> 
        </div> 
    </div> 
</div> 

在线演示：查看案例

完整幻灯片特效打包下载：

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