jquery图片自动切换

<script type ="text/javascript" language ="javascript">
$(document).ready(function()
{
   alert("7");
   var len=$("#flash_num>li").length;
   var index=1;
   var timer1=null;
   function showSys(num)  //图片切换函数
   {
    $("#flash_num>li").removeClass().addClass("click_out").eq(num).toggleClass("click_out").addClass("click_over");
    $("#flash_pic>div").fadeOut().eq(num).fadeIn();
   }
   
   function ziDong()  //自动切换
   {
    if(index==len)
    {
     index=0;
    }
    showSys(index);
    index=index+1;
   }
   
   timer1=setInterval(ziDong,1000);
   
   $("#flash_num>li").click(function() //点击切换
   {
    var index_num=$("#flash_num>li").index(this);
    showSys(index_num);
    index=index_num+1;  //改变全局变量的值，以便鼠标移开的时候能够衔接上
   });
   
   $("#flash_outer").mouseover(function()  //移动到上面时停止自动切换
       {
      //  alert("mouseover");
        clearInterval(timer1);
       });
       
   $("#flash_outer").mouseout(function()  //移开时继续自动切换
       {
       // alert("mouseout");
        timer1=setInterval(ziDong,3000);
       });
});
</script>




<div class ="demoteaser" id="flash_outer">
       <div  id="flash_pic" class ="demoteaser2">
 <div style="display:block">
   <a  title="to img1" href ="http://192.168.2.3/index.php?option=com_content&view=article&id=91&Itemid=219"target="_blank">
     <img   width="100%" height="300" src ="../../vanilla index images/NewImages/SYSPRO-BusinessLive.jpg"   />
   </a>
 </div>
  <div style="display:none">
     <a  title="to img2" href="http://192.168.2.3/index.php?option=com_content&view=article&id=92&Itemid=221" target="_blank">
                <img  width="100%" height="300" src ="../../vanilla index images/NewImages/2-aerospace-2.jpg"  />
            </a>
  </div>
  
  <div style="display:none" >
       <a  title="to img3" href="http://192.168.2.3/index.php?option=com_content&view=article&id=93&Itemid=222" target="_blank">
                  <img width="100%" height="300" src ="../../vanilla index images/NewImages/3-automotive-3.jpg"   />
                </a> 
  </div>
          
           <div style="display:none">
             <a  title="to img4" href="http://192.168.2.3/index.php?option=com_content&view=article&id=95&Itemid=223" target="_blank">
              <img  width="100%" height="300" src ="../../vanilla index images/NewImages/4-distribution-1-4.jpg" />
       </a>
           </div>
          
  </div>


      <ul id="flash_num" class ="ulyang" >
               <li class="click_over">1</li>
               <li class="click_out">2</li>
               <li class="click_out">3</li>
               <li class="click_out">4</li>
           </ul>
</div>








ul{list-style:none;margin:0px;padding:0px}
.click_out{margin-left:5px; float:left; text-align:center; height:16px; line-height:16px; width:16px; background:#333; color:#FFF; font-weight:bold; font-size:12px; cursor:pointer;_display:inline-block; }
.click_over{margin-left:5px; float:left;text-align:center; height:16px; line-height:16px; width:16px; background:#820000; color:#FFF; font-weight:bold; font-size:12px; cursor:pointer; _display:inline-block; }