问题就是他不会自动切换图片
原代码如下：
<!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" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<title>无标题文档</title>
</head>
<body>
<!--演示内容开始-->
<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
/* index_pic */
#index_pic{background:center;overflow:hidden;width:990px;position:relative;height:300px;overflow:hidden;margin:40px auto 0 auto;}
#index_pic ul{z-index:999;right:3px;bottom:0px;position:absolute;text-align:left}
#index_pic ul li{display:block;font-weight:900;font-size:12px;float:left;width:70px;color:#aaa;position:relative;height:50px;}
#index_pic li div{margin-top:5px;display:none;padding-left:10px;margin-left:70px}
#index_pic 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:0.6}
#back{width:990px;height:300px;overflow:hidden;}
#back .gray{filter:Gray();}
</style>
<div>
<ul>
<li><img src="images/cnnic_logo.png" width="162" height="62" alt="dfdsf" longdesc="http://www.abcd.com" /></li>
<li>sdafsdfsfsd</li>
</ul>
</div>
<div class="mr12580" style="margin-top:10px;">
<div class="left_830">
<div id="index_pic" class="index_pic" >
<ul>
<li><img src="images/index1.jpg" text="http://www.hx110.com/|_blank" pic="1"/></li>
<li><img src="images/index2.jpg" text="http://www.hx110.com/|_blank" pic="2"/></li>
<li><img src="images/index3.jpg" text="http://www.hx110.com/|_blank" pic="3"/></li>
<li><img src="images/index4.jpg" text="http://www.hx110.com/|_blank" pic="4"></li>
<li><img src="images/index5.jpg" text="http://www.hx110.com/|_blank" pic="5"></li>
<li><img src="images/index6.jpg" text="http://www.hx110.com/|_blank" pic="6"></li>
</ul>
<div id="back" style="opacity: 1; "><a href="http://www.hx110.com/" target="_self" class="gray"><img width="990" height="300" src="images/index3.jpg"></a></div>
</div><!--index_pic end-->
</div></div>
<script type="text/javascript">
var num = 0;
$("li img").load(function(){
num++;
if(num==5){
$("#index_pic").show();
}
}).click(function(){
//如果已经处于active状态，return
if (this.className.indexOf("active")!=-1)
return;
//active状态的图片恢复原样
$("li img.active").fadeTo(200,0.6).removeClass("active").animate({top:5,width:52,left:10},300);
//获取数据
var i = $(this).attr("pic");
var t = $(this).attr("text").split("|");
//当前
$(this).animate({top:-5,width:52,height:35},100).addClass("active").fadeTo(200,1);