轮播图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);17   i++;
   if(i==5){i=0};
   showPic(); 
      lunbo()  20 });//点击切换上一张 

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

  clearInterval(timer);

i--; 

if(i==-1){i=4};
 27  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); 

}