<div id="container">
            <a class="item" href="#"><img src="images/banner1.png"/></a>
            <a class="item" href="#"><img src="images/banner2.jpg"/></a>
            <a class="item" href="#"><img src="images/banner3.jpg"/></a>
            <a class="item" href="#"><img src="images/banner4.jpg"/></a>
            <a class="item" href="#"><img src="images/banner5.jpg"/></a>
       
            <div class="btn prev"><</div>
            <div class="btn next">></div>
       
            <ul id="tabs">
              <li class="tab active"></li>
              <li class="tab"></li>
              <li class="tab"></li>
              <li class="tab"></li>
              <li class="tab"></li>
            </ul>
</div>
#container{
    width:1226px;
    height:460px;
    position:relative;
    overflow:hidden;
    border-radius:10px;
}
.item{
    position:absolute;
}
 
#tabs{
    position:absolute;
    right:30px;
    bottom:20px;
}
.tab{
    float:left;
    margin-right:10px;
    width:6px;
    height:6px;
    border:3px solid rgba(184,178,182,.8);
    border-radius:50%;
    background:#989196;
    cursor:pointer;
}
.active{
    background:#fff;
    border-color:#999497;
}
.btn{
    position:absolute;
    top:50%;
    margin-top:-35px;
    width:40px;
    height:70px;
    color:#d6d3d5;
    font-size:36px;
    line-height:70px;
    text-align:center;
    cursor:pointer;
}
.btn:hover{
    background:rgba(127,120,125,0.8);
}
.prev{
    position:absolute;
    left:235px;
    border-radius:0 5px 5px 0;  
}
.next{
    position:absolute;
    right:0;
    border-radius:5px 0 0 5px;
}


$(document).ready(function(){
   var i = 0 ;
   var timer;
 
  //用jquery方法設(shè)置第一張圖片顯示，其余隱藏
  $('.item').eq(0).show().siblings('.item').hide();
   
  //調(diào)用showTime()函數(shù)（輪播函數(shù)）
  showTime();
   
  //當(dāng)鼠標(biāo)經(jīng)過下面的數(shù)字時(shí)，觸發(fā)兩個(gè)事件（鼠標(biāo)懸停和鼠標(biāo)離開）
  $('.tab').hover(function(){
    //獲取當(dāng)前i的值，并顯示，同時(shí)還要清除定時(shí)器
    i = $(this).index();
    Show();
    clearInterval(timer);
  },function(){
    //
    showTime();
  });
   
  //鼠標(biāo)點(diǎn)擊左側(cè)的箭頭
  $('.prev').click(function(){
    clearInterval(timer);
    if(i == 0){
      i = 5;//注意此時(shí)i的值
    }
    i--;
    Show();
    showTime();
  });
   
  //鼠標(biāo)點(diǎn)擊右側(cè)的箭頭
  $('.next').click(function(){
    clearInterval(timer);
    if(i == 4){
      i = -1;//注意此時(shí)i的值
    }
    i++;
    Show();
    showTime();
  });
 
   
//創(chuàng)建一個(gè)showTime函數(shù)
function showTime(){
  //定時(shí)器
  timer = setInterval(function(){
    //調(diào)用一個(gè)Show()函數(shù)
    Show();
    i++;
    //當(dāng)圖片是最后一張的后面時(shí)，設(shè)置圖片為第一張
    if(i==5){
      i=0;
    }
  },2000);
}
 
 
//創(chuàng)建一個(gè)Show函數(shù)
function Show(){
  //在這里可以用其他jquery的動(dòng)畫
  $('.item').eq(i).fadeIn(300).siblings('.item').fadeOut(300);
   
  //給.tab創(chuàng)建一個(gè)新的Class為其添加一個(gè)新的樣式，并且要在css代碼中設(shè)置該樣式
  $('.tab').eq(i).addClass('active').siblings('.tab').removeClass('active');
   
}
  
});