学习JS也有一段时间了，这是我花了近一天的时间做的练习，不会的函数就翻翻jQuery的帮助文档，还算做的比较顺利。兼容ie6（有一点点兼容性问题但不影响功能）、7、8和ff，还有一个小问题，就是ie8好像不支持jQuery的fadeIn()方法，因此ie8下没有渐变的切换效果，不知什么原因。
效果预览（预览有问题请把代码拷回本地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>图片轮播jQuery版</title>
</head>
<style>
* {margin:0;padding:0;}
body{ background:#fff}
.box {width:400px;height:300px;margin:100px auto;}
.imgbox {border:1px solid #3CF;width:400px;height:300px;position:relative;}
.imgbox img{ border:none}
.imgbox .all{display:none;}
.imgbox a.cur_img {display:inline;}
.title-bg {width:400px;height:30px;background:#000;filter:Alpha(Opacity=40);opacity:0.4;position:absolute;bottom:0;*position:absolute;*left:0;}
.imgID {width:400px;height:20px;position:absolute;bottom:5px;left:5px;}
.imgID ul {height:20px;width:380px;}
.imgID li {display:inline;z-index:9999;list-style:none;width:20px;height:20px;color:#fff;}
.imgID li a {display:inline-block;width:20px;height:20px;border:1px solid #fff;background:#999;color:#fff;font-weight:bold;text-decoration:none;text-align:center;}
.imgID .cur_ID{background:#F0F}
.imgID li a:hover {background:#F0F;}
.img_title{ position:absolute; left:150px; bottom:0px; height:30px; font-weight:bold;font-size:15px; cursor:pointer; z-index:9000;}
.img_title a{color:#FFF;}
#title{ display:block;height:30px; line-height:30px; text-decoration:none}
#title:visited{ color:#fff}
</style>
<body>
<div class="box">
<div class="imgbox"> <a href="#1" title="喜羊羊与灰太狼" class="cur_img all"><img src="http://images.cnblogs.com/cnblogs_com/cos2004/286060/o_img01.jpg" /></a> <a href="#2" title="大闹天宫" class="all"><img src="http://images.cnblogs.com/cnblogs_com/cos2004/286060/o_img02.jpg" /></a> <a href="#3" title="猫和老鼠" class="all"><img src="http://images.cnblogs.com/cnblogs_com/cos2004/286060/o_img03.jpg" /></a> <a href="#4" title="狮子王" class="all"><img src="http://images.cnblogs.com/cnblogs_com/cos2004/286060/o_img04.jpg" /></a>
<div class="title-bg"></div>
<div class="img_title"><a href="#" title="" id="title">这是题目</a></div>
<div class="imgID">
<ul>
<li><a href="javascript:void(0);" class="cur_ID">1</a></li>
<li><a href="javascript:void(0);">2</a></li>
<li><a href="javascript:void(0);">3</a></li>
<li><a href="javascript:void(0);">4</a></li>
</ul>
</div>
</div>
</div>
</body>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
var time=2000;//图片延时
var curImgID=0;//当前显示图片的序号
var intervalID=setInterval(imgToggle,time);
$(".img_title a").text($(".cur_img").attr("title"));
$(".img_title a").attr("title",$(".cur_img").attr("title"));
$(".img_title a").attr("href",$(".cur_img").attr("href"));
$(".imgID a").click(function(){
clearInterval(intervalID);//先停止定时器，保证点击了某项的时候该项有足够的时间显示
$(".cur_img").css({display:"none"});//除了cur_img外的其余图片设置为不可见
$(".cur_img").removeClass("cur_img");
$(".imgbox a").eq($(".imgID a").index($(this))).fadeIn("slow");//选择对应的按钮序号的图片显示，this指向你按下的按钮
$(".imgbox a").eq($(".imgID a").index($(this))).addClass("cur_img");
$(".cur_ID").removeClass("cur_ID");
$(this).addClass("cur_ID");
change();//change函数主要是把处理img_title的a标签的相关操作放到一起
intervalID=setInterval(imgToggle,time);
});
$(".img_title a").click(function(){
alert($(this).attr("href"));//响应点击题目
});
$(".imgbox img").click(function(){
alert($(this).parent().attr("href"));//响应点击图片
});
function imgToggle(){
curImgID=$(".imgID a").index($(".cur_ID"));//当前按钮的序号，与当前图片序号对应
$(".imgbox .all").css({display:"none"});//除了cur_img外的其余图片设置为不可见
$(".cur_img").removeClass("cur_img");
if(curImgID==$(".imgID a").length-1){
curImgID=0;
}else{curImgID+=1;}
$(".imgbox a").eq(curImgID).fadeIn("slow");
$(".imgbox a").eq(curImgID).addClass("cur_img");
$(".cur_ID").removeClass("cur_ID");
$(".imgID a").eq(curImgID).addClass("cur_ID");
change();
}
function change(){
$(".img_title a").attr("title",$(".cur_img").attr("title"));
$(".img_title a").text($(".cur_img").attr("title"));
$(".img_title a").attr("href",$(".cur_img").attr("href"));
}
});
</script>
</html>
==================================================
作者：绿色花园
出处：http://www.cnblogs.com/cos2004/archive/2011/03/10/1979625.html
==================================================