<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>图片切换，带标题文字</title>
<meta http-equiv="X-UA-Compatible" content="IE=7" />
<meta http-equiv="content-type" content="text/html; charset=gb2312" />
<script type="text/javascript" src="common/jquery-1.2.6.min.js"></script>
<link type="text/css" rel="stylesheet" href="common/common.css" />
<style type="text/css">
#play{width:500px;height:230px; border:#ccc 1px solid;}
#playBg{margin-top:200px;z-index:1;filter:alpha(opacity=70);opacity:0.7;width:500px;position:absolute;height:30px;background:#000;}
#playText{margin-top:200px;z-index:2;padding-left:10px;font-size:14px;font-weight:bold;width:340px;color:#fff;line-height:30px; overflow:hidden;position:absolute;cursor:pointer;}
#playNum{margin:205px 5px 0 350px;z-index:3;width:145px; text-align:right;position:absolute;height:25px;}
#playNum a{margin:0 2px;width:20px;height:20px;font-size:14px; font-weight:bold;line-height:20px;cursor:pointer;color:#000;padding:0 5px;background:#D7D6D7;text-align:center}
#playShow img{width:500px;height:230px;}
</style>
<body>
<div id="play">
<ul>
<li id="playBg"></li>
<li id="playText"></li>
<li id="playNum"><a>1</a><a>2</a><a>3</a><a>4</a><a>5</a><a>6</a></li>
<li id="playShow">
<a href="#" target="_blank"><img src="images/01.jpg" alt="澳大利亚：体验蓝山风光，感受澳洲风情"></a>
<a href="#" target="_blank"><img src="images/02.jpg" alt="九月抄底旅游，马上行动"></a>
<a href="#" target="_blank"><img src="images/03.jpg" alt="港澳旅游：超值特价，奢华享受"></a>
<a href="#" target="_blank"><img src="images/04.jpg" alt="炎炎夏日哪里去，途牛带你海滨游"></a>
<a href="#" target="_blank"><img src="images/05.jpg" alt="定途牛旅游线路，优惠购买缤纷乐相册"></a>
<a href="#" target="_blank"><img src="images/03.jpg" alt="三亚自助游"></a>
</li>
</ul>
</div>
<script type=text/javascript>
var t = n = 0, count = $("#playShow a").size();
$(function(){
$("#playShow a:not(:first-child)").hide();
$("#playText").html($("#playShow a:first-child").find("img").attr('alt'));
$("#playNum a:first").css({"background":"#FFD116",'color':'#A8471C'});
$("#playText").click(function(){window.open($("#playShow a:first-child").attr('href'), "_blank")});
$("#playNum a").click(function() {
var i = $(this).text() - 1;
n = i;
if (i >= count) return;
$("#playText").html($("#playShow a").eq(i).find("img").attr('alt'));
$("#playText").unbind().click(function(){window.open($("#playShow a").eq(i).attr('href'), "_blank")})
$("#playShow a").filter(":visible").hide().parent().children().eq(i).fadeIn(1200);
$(this).css({"background":"#FFD116",'color':'#A8471C'}).siblings().css({"background":"#D7D6D7",'color':'#000'});
});
t = setInterval("showAuto()", 5000);
$("#play").hover(function(){clearInterval(t)}, function(){t = setInterval("showAuto()", 5000);});
})
function showAuto()
{
n = n >= (count - 1) ? 0 : ++n;
$("#playNum a").eq(n).trigger('click');
}
</script>
</body>
</html>
jQuery实例（菜单、滚动、层隐藏等）.zip （41个子文件） 
隔行变色 
隔行变色.html 1KB
jquery-1.3.2.js 118KB js隔行变色.html 1KB 表格的光棒效果 jquery-1.3.2.js 118KB 光棒效果.html 1KB 省略代替 challenge_and_solution.jsp 34KB jQueryDemo 隔行换色.html 1KB 收缩展开效果.html 1KB images 
01.jpg 180KB 05.jpg 57KB
04.bmp 20KB 02.bmp 20KB 04.jpg 104KB 01.bmp 20KB
navbg.gif 10KB prev.jpg 11KB ico-arrow.gif 9KB next.jpg 11KB 03.bmp 20KB 03.jpg 113KB 05.bmp 20KB 06.jpg 123KB 02.jpg 156KB 【经典】幕帘伸缩广告.html 1KB 【经典】多行滚动.html 2KB 【经典】单行滚动.html 1KB 【经典】导航效果.html 2KB 【经典】图片切换，带标题文字.html 3KB 【经典】弹出层菜单.html 2KB 弹出层.html 1KB 【经典】滚动效果 上翻 下翻.html 3KB 【经典】图片切换展示.html 3KB common jquery.pngFix.js 3KB jcarousellite.min.js 4KB jquery-1.2.6.min.js 55KB common.css 473B common.js 251B 【经典】自动轮换内容.html 2KB 【经典】选项卡.html 3KB 无间隙滚动.html 1KB 渐变弹出层.html 2KB资源评论
lrubi2013-05-14不错，满足我的需要！- KevinBlack2013-01-04基本网上常见的效果都有了！很不错！
