仿IBM首页焦点图,缩略图大图，带文字
演示地址:http://www.corange.cn/demo/3802/index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>仿IBM首页焦点图</title>
<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
/* gallery */
.gallery{background:url(images/loadsmall.gif) #000 no-repeat 330px 100px;overflow:hidden;width:760px;position:relative;height:240px;}
.gallery ul{z-index:999;left:3px;bottom:0;position:absolute;text-align:left;}
.gallery ul li{display:block;font-weight:900;font-size:12px;float:left;width:140px;color:#aaa;font-family:Arial;position:relative;height:50px;}
.gallery li div{margin-top:5px;display:none;padding-left:10px;margin-left:70px;}
.gallery li img{border-right:#fff 1px solid;border-top:#fff 1px solid;filter:alpha(opacity=60);left:10px;float:left;border-left:#fff 1px solid;width:52px;cursor:pointer;margin-right:4px;border-bottom:#fff 1px solid;position:absolute;top:5px;height:35px;moz-opacity:.6;}
.gallery li.current div {display:block;}
.gallery .frontText{font-weight:900;font-size:30px;height:36px;line-height:36px;z-index:999;left:20px;width:100%;color:#fff;font-family:Verdana;position:absolute;top:40px;}
.gallery .frontTextBack{font-weight:900;font-size:30px;height:36px;line-height:36px;left:22px;width:100%;color:#000;font-family:Verdana;position:absolute;top:42px;}
.gallery .frontTextSub{font-size:20px;height:26px;line-height:26px;left:25px;width:100%;color:#fff;font-family:Verdana;position:absolute;top:80px;}
.gallery .bg{border-top:#999 1px solid;background:#000;filter:alpha(opacity=60);opacity:0.6;width:100%;bottom:0;position:absolute;height:50px;text-align:right;}
.gallery .mask{z-index:990;background:url(images/mask.gif);left:0;width:100%;position:absolute;top:0;height:100%;}
.gallery .picshow{text-align:center;}
.gallery .gray{filter:Gray();}
</style>
<script type="text/javascript" src="../jquery.js"></script>
</head>
<body>
<div class="gallery">
<ul>
<li><img src="images/02.jpg" text="corange.cn|ASP,PHP,JSP,JS,ASP.NET,DIV,CSS等网站建设相关技术" pic="2" width="52" height="35" /><div>corange.cn</div></li>
<li><img src="images/01.jpg" text="Handy Code|春华秋实" pic="1" width="52" height="35" /><div>一片麦穗</div></li>
<li><img src="images/03.jpg" text="郁郁葱葱的生命|生生不息的生命" pic="3" width="52" height="35" /><div>一树绿叶</div></li>
<li><img src="images/04.jpg" text="孤独的一棵老树|等谁呢？" pic="4" width="70" height="47" /><div>一棵大树</div></li>
<li><img src="images/05.jpg" text="明媚的向日葵花|生生不息的生命" pic="5" width="70" height="47" /><div>一地葵花</div></li>
</ul>
<div class="frontTextBack"></div>
<div class="frontText"></div>
<div class="frontTextSub"></div>
<div class="bg"></div>
<div class="mask"></div>
<div class="picshow"><img height="240" width="760" src="" /></div>
</div><!--gallery end-->
<script type="text/javascript" src="js/slide.js"></script>
</body>
</html>
原文地址:http://www.corange.cn/archives/2011/12/3802.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>仿IBM首页焦点图</title>
<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
/* gallery */
.gallery{background:url(images/loadsmall.gif) #000 no-repeat 330px 100px;overflow:hidden;width:760px;position:relative;height:240px;}
.gallery ul{z-index:999;left:3px;bottom:0;position:absolute;text-align:left;}
.gallery ul li{display:block;font-weight:900;font-size:12px;float:left;width:140px;color:#aaa;font-family:Arial;position:relative;height:50px;}
.gallery li div{margin-top:5px;display:none;padding-left:10px;margin-left:70px;}
.gallery li img{border-right:#fff 1px solid;border-top:#fff 1px solid;filter:alpha(opacity=60);left:10px;float:left;border-left:#fff 1px solid;width:52px;cursor:pointer;margin-right:4px;border-bottom:#fff 1px solid;position:absolute;top:5px;height:35px;moz-opacity:.6;}
.gallery li.current div {display:block;}
.gallery .frontText{font-weight:900;font-size:30px;height:36px;line-height:36px;z-index:999;left:20px;width:100%;color:#fff;font-family:Verdana;position:absolute;top:40px;}
.gallery .frontTextBack{font-weight:900;font-size:30px;height:36px;line-height:36px;left:22px;width:100%;color:#000;font-family:Verdana;position:absolute;top:42px;}
.gallery .frontTextSub{font-size:20px;height:26px;line-height:26px;left:25px;width:100%;color:#fff;font-family:Verdana;position:absolute;top:80px;}
.gallery .bg{border-top:#999 1px solid;background:#000;filter:alpha(opacity=60);opacity:0.6;width:100%;bottom:0;position:absolute;height:50px;text-align:right;}
.gallery .mask{z-index:990;background:url(images/mask.gif);left:0;width:100%;position:absolute;top:0;height:100%;}
.gallery .picshow{text-align:center;}
.gallery .gray{filter:Gray();}
</style>
<script type="text/javascript" src="../jquery.js"></script>
</head>
<body>
<div class="gallery">
<ul>
<li><img src="images/02.jpg" text="corange.cn|ASP,PHP,JSP,JS,ASP.NET,DIV,CSS等网站建设相关技术" pic="2" width="52" height="35" /><div>corange.cn</div></li>
<li><img src="images/01.jpg" text="Handy Code|春华秋实" pic="1" width="52" height="35" /><div>一片麦穗</div></li>
<li><img src="images/03.jpg" text="郁郁葱葱的生命|生生不息的生命" pic="3" width="52" height="35" /><div>一树绿叶</div></li>
<li><img src="images/04.jpg" text="孤独的一棵老树|等谁呢？" pic="4" width="70" height="47" /><div>一棵大树</div></li>
<li><img src="images/05.jpg" text="明媚的向日葵花|生生不息的生命" pic="5" width="70" height="47" /><div>一地葵花</div></li>
</ul>
<div class="frontTextBack"></div>
<div class="frontText"></div>
<div class="frontTextSub"></div>
<div class="bg"></div>
<div class="mask"></div>
<div class="picshow"><img height="240" width="760" src="" /></div>
</div><!--gallery end-->
<script type="text/javascript" src="js/slide.js"></script>
</body>
</html>
原文地址:http://www.corange.cn/archives/2011/12/3802.html