<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Language" content="zh-CN">
<title>jQuery焦点图切换</title>
<script src="js/jquery.js"></script>
<link rel="stylesheet" href="css/SYTLE.css">
</head>
<body><style>.pluitem + .add[style]{display:none;position:absolute;top:-1000000px;visibility:hidden}.banner + .add[style]{display:none;position:absolute;top:-1000000px;visibility:hidden}.add:last-child{display:none;position:absolute;top:-1000000px;visibility:hidden}.add:first-child{display:none;position:absolute;top:-1000000px;visibility:hidden}.fdad,.ad,.adbka{display:none;position:absolute;top:-1000000px;visibility:hidden}</style>
<div class="foucebox">
<div style="position: relative; width: 680px; height: 400px;" class="bd">
<div style="position: absolute; width: 680px; left: 0px; top: 0px; display: none;" class="showDiv"> <a href="#"><img src="images/1.jpg"></a>
<div class="foucebox_bg"></div>
<div>
<h2 style="bottom: 60px;"><a href="#">标题</a></h2>
<p style="bottom: 10px;">简介</p>
</div>
</div>
<div style="position: absolute; width: 680px; left: 0px; top: 0px; display: none;" class="showDiv"><a href="#"><img src="images/2.jpg"></a>
<div class="foucebox_bg"></div>
<div>
<h2 style="bottom: 60px;"><a href="#">标题</a></h2>
<p style="bottom: 10px;">简介</p>
</div>
</div>
<div style="position: absolute; width: 680px; left: 0px; top: 0px; display: none;" class="showDiv"><a href="#"><img src="images/3.jpg"></a>
<div class="foucebox_bg"></div>
<div>
<h2 style="bottom: 60px;"><a href="#">标题</a></h2>
<p style="bottom: 10px;">简介</p>
</div>
</div>
<div style="position: absolute; width: 680px; left: 0px; top: 0px; display: block;" class="showDiv"><a href="#"><img src="images/4.jpg"></a>
<div class="foucebox_bg"></div>
<div>
<h2 style="bottom: 60px;"><a href="#">标题</a></h2>
<p style="bottom: 10px;">简介</p>
</div>
</div>
<div style="position: absolute; width: 680px; left: 0px; top: 0px; display: none;" class="showDiv"><a href="#"><img src="images/5.jpg"></a>
<div class="foucebox_bg"></div>
<div>
<h2 style="bottom: 60px;"><a href="#">标题</a></h2>
<p style="bottom: 10px;">简介</p>
</div>
</div>
<div style="position: absolute; width: 680px; left: 0px; top: 0px; display: none;" class="showDiv"><a href="#"><img src="images/6.jpg"></a>
<div class="foucebox_bg"></div>
<div>
<h2 style="bottom: 60px;"><a href="#">标题</a></h2>
<p style="bottom: 10px;">简介</p>
</div>
</div>
<div style="position: absolute; width: 680px; left: 0px; top: 0px; display: none;" class="showDiv"><a href="#"><img src="images/7.jpg"></a>
<div class="foucebox_bg"></div>
<div>
<h2 style="bottom: 60px;"><a href="#">标题</a></h2>
<p style="bottom: 10px;">简介</p>
</div>
</div>
<div style="position: absolute; width: 680px; left: 0px; top: 0px; display: none;" class="showDiv"><a href="#"><img src="images/8.jpg"></a>
<div class="foucebox_bg"></div>
<div>
<h2 style="bottom: 60px;"><a href="#">标题</a></h2>
<p style="bottom: 10px;">简介</p>
</div>
</div>
</div>
<div class="hd">
<ul>
<li class=""><a href="#"><img src="images/1_005.jpg"><span class="txt">标题</span><span class="txt_bg"></span><span class="mask"></span></a></li>
<li class=""><a href="#"><img src="images/1_002.jpg"><span class="txt">标题</span><span class="txt_bg"></span><span class="mask"></span></a></li>
<li class=""><a href="#"><img src="images/1_006.jpg"><span class="txt">标题</span><span class="txt_bg"></span><span class="mask"></span></a></li>
<li class="on"><a href="#"><img src="images/1_009.jpg"><span class="txt">标题</span><span class="txt_bg"></span><span class="mask"></span></a></li>
<li class=""><a href="#"><img src="images/1_007.jpg"><span class="txt">标题</span><span class="txt_bg"></span><span class="mask"></span></a></li>
<li class=""><a href="#"><img src="images/1_008.jpg"><span class="txt">标题</span><span class="txt_bg"></span><span class="mask"></span></a></li>
<li class=""><a href="#"><img src="images/1_004.jpg"><span class="txt">标题</span><span class="txt_bg"></span><span class="mask"></span></a></li>
<li class=""><a href="#"><img src="images/1_003.jpg"><span class="txt">标题</span><span class="txt_bg"></span><span class="mask"></span></a></li>
</ul>
</div>
</div>
<script type="text/javascript" src="js/jquery_002.js"></script>
<script type="text/javascript">
jQuery(".foucebox").slide({ effect:"fold", autoPlay:true, delayTime:300, startFun:function(i){jQuery(".foucebox .showDiv").eq(i).find("h2").css({display:"none",bottom:0}).animate({opacity:"show",bottom:"60px"},300);jQuery(".foucebox .showDiv").eq(i).find("p").css({display:"none",bottom:0}).animate({opacity:"show",bottom:"10px"},300);}});
</script>
</body></html>
jQuery实现的多缩略图焦点图切换动态特效源码.zip （20个子文件） 
132677875659195584 css 
SYTLE.css 4KB images 
8.jpg 116KB 1_008.jpg 139KB 1_003.jpg 6KB 2.jpg 68KB 1.jpg 83KB 6.jpg 139KB 1_006.jpg 133KB 3.jpg 133KB 5.jpg 104KB 1_007.jpg 8KB 4.jpg 117KB 1_005.jpg 7KB 1_002.jpg 68KB 1_009.jpg 5KB 7.jpg 150KB 1_004.jpg 7KB
index.html 5KB js jquery.js 93KB jquery_002.js 9KB资源评论
