轮播图jq版

轮播图的需求 1：图片自己轮播，并且下面的tabs小图标跟着显示 2.鼠标hover到tabs上面显示对应的图片 3、点击左右按钮，显示下一张图片。

<div id="oLunbo">
    <div id="imgs">
          <img src="/images/1.jpg" />
          <img src="/images/2.jpg" />
          <img src="/images/3.jpg" />
          <img src="/images/4.jpg" />
          <img src="/images/5.jpg" />
    </div>
    <ul id="tabs">
        <li class="on"></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
      </ul>
       <div id="prev" class="btn "><</div>
       <div id ="next" class="btn ">></div>
 </div>

　　

 var i=0,timer;
 $(function(){
      $("#imgs img").eq(0).show().siblings().hide();//第一张图片显示其余隐藏
  lunbo();
 //hover tabs
 $("#tabs li").hover(function(){
          clearInterval(timer);
           i=$(this).index();
      showPic();
 },function(){
   lunbo();
 });

 //点击切换下一张
  $("next").click(function(){
    clearInterval(timer);   i++;
    if(i==5){i=0};
    showPic(); 
      lunbo()   }); //点击切换上一张 

 $("prev").click(function(){ 

  clearInterval(timer);

 i--; 

 if(i==-1){i=4};
   showPic(); 

 }); 

 }) 

 //显示图片 

 function showPic(){ 

 $("#imgs img").eq(i).stop(true,true).show().siblings().stop(true,true).hide();//图片 

 $("#tabs li").eq(i).addClass("on").siblings().removeClass("on")} 

 //图片轮播 

 function lunbo(){ 

 timer=setInterval(function(){ 

 i++; 

 if(i==5){i=0}; 

   showPic() 

},1000); 

 }