轮播图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>

 1 var i=0,timer;
 2 $(function(){
 3      $("#imgs img").eq(0).show().siblings().hide();//第一张图片显示其余隐藏
 4  lunbo();
 5 //hover tabs
 6 $("#tabs li").hover(function(){
 7          clearInterval(timer);
           i=$(this).index();
 8      showPic();
 9 },function(){
10   lunbo();
11 });
12     
13 //点击切换下一张
14  $("next").click(function(){
15    clearInterval(timer);17   i++;
18    if(i==5){i=0};
19    showPic(); 
      lunbo()  20 });21 //点击切换上一张


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

  clearInterval(timer);

25 i--; 

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

28 }); 

29 }) 

31 //显示图片 

32 function showPic(){ 

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

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

36 //图片轮播 

37 function lunbo(){ 

38 timer=setInterval(function(){ 

39 i++; 

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

41   showPic() 

},1000); 

45 }