$(document).ready(function(){ 

//定时器
var t=false;
var j=0; 
$("#btn").find("span").each(function(i){
$("#btn").find("span").eq(i).mouseover( 
   function(){

//cur是目前显示的图片的序列 不知道有没有更简便的选择方法
   var cur=$("#img").find("img:visible").parent().prevAll().length;
   //alert(cur);

//判断一下手放上去的是不是当前显示的序列？是的话就别忙活了
   if(i!==cur){
   j=i;

//样式操作 标记当前
   $(this).addClass("hov").siblings().removeClass("hov");

//两个callback连续操作 完成切换的效果 想自己实现更酷的 自己加

   $("#img").find("img:visible").fadeOut(500,
    function(){
     $("#img").find("img").eq(i).fadeIn(500,function(){
      $("#msg").find("li:visible").hide();
      $("#msg").find("li").eq(i).show("fast");     
      })    
     }); 
   }}  
   ) 
})
//通过定时回调span 的 mouseover()来实现自动轮换 

var $func_play=function(){   
    $("#btn").find("span").eq(j).mouseover()
    j++;
    if(j==7){j=0;}  
   }

//放上去清除时钟 离开再重新计时 用了.hover()
   t=setInterval($func_play,4000);
   $("#imgnav").hover(function(){
    clearInterval(t);   
    return j;
    },function(){
     t=setInterval($func_play,4000);
     })
})