<!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>jquery带文字和按钮的自动播放焦点图</title>
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<style type="text/css">
/*reset css*/
*{margin:0;padding:0;list-style:none;border:0;}
/*demo css*/
.i_box{position:relative;overflow:hidden;width:700px;height:350px;margin:40px auto 0 auto;}
.i_imglist{width:700px;height:350px;z-index:0}
.i_imglist li img{width:700px;height:350px;display:block}
.i_nav{position:absolute;left:20px;bottom:0;overflow:hidden;width:660px;height:30px;z-index:2}
.i_nav ul li{float:left;_display:inline;width:163px;height:30px;margin:0 1px;background-color:#000;opacity:0.5;filter:alpha(opacity=50);text-align:center;line-height:30px;cursor:pointer}
.i_nav ul li.hover{background-color:#fff;opacity:0.8;filter:alpha(opacity=80)}
.i_nav ul li a{color:#fff;text-decoration:none}
.i_nav ul li a:hover{text-decoration:underline}
.i_nav ul li.hover a{color:#000}
.i_prev a,.i_next a{position:absolute;overflow:hidden;width:19px;height:30px;background-color:#000;color:#fff;text-align:center;font-weight:bold;opacity:0.9;filter:alpha(opacity=90);text-decoration:none;line-height:30px}
.i_prev a{left:0;bottom:0}
.i_next a{right:0;bottom:0}
.i_prev a:hover,.i_next a:hover{background-color:#fff;opacity:0.8;filter:alpha(opacity=80);color:#000}
</style>
</head>
<body>
<div class="i_box">
<div class="i_imglist">
<ul id="J_imgList">
<li><a href="http://www.jb51.net/"><img src="images/a358be24367a5ea9dec7aa61a7527a7ab16009b9_m.jpg" alt="" title="" /></a></li>
<li><a href="http://www.jb51.net/"><img src="images/c4e37762e79866a2f10d3c5926bbd188924ddbd3_m.jpg" alt="" title="" /></a></li>
<li><a href="http://www.jb51.net/"><img src="images/c4e37762e79866a2f10d3c5926bbd188924ddbd3_m.jpg" alt="" title="" /></a></li>
<li><a href="http://www.jb51.net/"><img src="images/8a37e5af175db41e06004dc098e9c173aee70116_m.jpg" alt="" title="" /></a></li>
<li><a href="http://www.jb51.net/"><img src="images/61f4d9a7eb72c52d84b7d86abe75a85b96b52da8_m.jpg" alt="" title="" /></a></li>
<li><a href="http://www.jb51.net/"><img src="images/b74aaf555eb970c3a1fdd6e7b2b5dd2a7a971286_m.jpg" alt="" title="" /></a></li>
<li><a href="http://www.jb51.net/"><img src="images/156c2157ea31033cd8d2ae8431be8497387e5db0_m.jpg" alt="" title="" /></a></li>
<li><a href="http://www.jb51.net/"><img src="images/4dc9209aafd33affd86dd6c5b21b9f013ae06b88_m.jpg" alt="" title="" /></a></li>
<li><a href="http://www.jb51.net/"><img src="images/c4e37762e79866a2f10d3c5926bbd188924ddbd3_m.jpg" alt="" title="" /></a></li>
<li><a href="http://www.jb51.net/"><img src="images/c4e37762e79866a2f10d3c5926bbd188924ddbd3_m.jpg" alt="" title="" /></a></li>
<li><a href="http://www.jb51.net/"><img src="images/8a37e5af175db41e06004dc098e9c173aee70116_m.jpg" alt="" title="" /></a></li>
<li><a href="http://www.jb51.net/"><img src="images/61f4d9a7eb72c52d84b7d86abe75a85b96b52da8_m.jpg" alt="" title="" /></a></li>
<li><a href="http://www.jb51.net/"><img src="images/156c2157ea31033cd8d2ae8431be8497387e5db0_m.jpg" alt="" title="" /></a></li>
<li><a href="http://www.jb51.net/"><img src="images/4dc9209aafd33affd86dd6c5b21b9f013ae06b88_m.jpg" alt="" title="" /></a></li>
</ul>
</div><!--切换大图-->
<div class="i_nav">
<div class="i_navlist">
<ul id="J_navList">
<li><a href="http://www.jb51.net/">11脚本之家</a></li>
<li><a href="http://www.jb51.net/">一直照进我心里</a></li>
<li><a href="http://www.jb51.net/">往事已遥远</a></li>
<li><a href="http://www.jb51.net/">一年又一年</a></li>
<li><a href="http://www.jb51.net/">22风吹起的青色衣衫</a></li>
<li><a href="http://www.jb51.net/">夕阳里的温暖容颜</a></li>
<li><a href="http://www.jb51.net/">你比以前更加美丽</a></li>
<li><a href="http://www.jb51.net/">像盛开的花</a></li>
<li><a href="http://www.jb51.net/">33阳光真温暖</a></li>
<li><a href="http://www.jb51.net/">一直照进我心里</a></li>
<li><a href="http://www.jb51.net/">往事已遥远</a></li>
<li><a href="http://www.jb51.net/">一年又一年</a></li>
<li><a href="http://www.jb51.net/">44风吹起的青色衣衫</a></li>
<li><a href="http://www.jb51.net/">夕阳里的温暖容颜</a></li>
</ul>
</div>
</div><!--图片导航-->
<div class="i_prev" id="J_prev"><a href="javascript:void(0)">< </a></div>
<div class="i_next" id="J_next"><a href="javascript:void(0)"> ></a></div>
</div>
<script type="text/javascript" src="js/script.js"></script>
</body>
</html>
jQuery实现带标题的焦点图片轮播特效源码.zip （10个子文件） 
132677870317134857 images 
c4e37762e79866a2f10d3c5926bbd188924ddbd3_m.jpg 40KB 4dc9209aafd33affd86dd6c5b21b9f013ae06b88_m.jpg 19KB 156c2157ea31033cd8d2ae8431be8497387e5db0_m.jpg 36KB 61f4d9a7eb72c52d84b7d86abe75a85b96b52da8_m.jpg 38KB b74aaf555eb970c3a1fdd6e7b2b5dd2a7a971286_m.jpg 47KB a358be24367a5ea9dec7aa61a7527a7ab16009b9_m.jpg 26KB 8a37e5af175db41e06004dc098e9c173aee70116_m.jpg 42KB
index.html 5KB js 
jquery-1.7.2.min.js 93KB script.js 2KB资源评论
