我們在開發當中經常用到輪播。我在這裏總結了一下幾種，僅供參考：

第一種：

　　1、jQuery：用display ：none/block控制的一種輪播；

// CSS部分
#igs {
    margin: 30px auto;
    width: 1200px;
    height: 460px;
    position: relative;
}
         
.ig {
    position: absolute;
}
         
#tabs {
    position: absolute;
    list-style: none;
    background-color: rgba(255,255,255,.5);
    left: 500px;
    bottom: 10px;
    border-radius: 10px;
    padding: 5px 0 5px 5px;
}
         
.tab{
    float: left;
    text-align: center;
    line-height: 20px;
    width: 20px;
    height: 20px;
    cursor: pointer;
    overflow: hidden;
    margin-right: 4px;
    border-radius: 100%;
    background-color: rgb(200,100,150);
}
        
.tab.active{
    background-color: red;
    color: #fff;
}

.btn{
    position: absolute;
    top: 200px;
    width: 40px;
    color: #fff;
    height: 100px;
    background-color: rgba(255,255,255,.3);
    font-size: 40px;
    font-weight: bold;
    text-align: center;
    line-height: 100px;
    border-radius: 5px;
    margin: 0 5px;
}
         
.btn2{
    position: absolute;
    right: 0px;
}
         
.btn:hover{
    background-color: rgba(0,0,0,.7);
}

// HTML部分
        
 
<div id="igs">
              <a class="ig" href="#">1<img src="images/slider-1.jpg"/></a>
              <a class="ig" href="#">2<img src="images/slider-2.jpg"/></a>
              <a class="ig" href="#">3<img src="images/slider-3.jpg"/></a>
              <
 
a class="ig" href="#">4<img src="images/slider-4.jpg"/></a>
              <a class="ig" href="#">5<img src="images/slider-5.jpg"/></a>
              <div class="btn btn1"><</div>
              <div class="btn btn2">></div>
              <ul id
 
="tabs">
                  <li class="tab active">1</li>
                  <li class="tab">2</li>
                  <li class="tab">3</li>
                  <li class="tab">4</li>
                  <li class="tab">5</li>
              </ul>
        </div>

// JavaScript部分
            //定義全局變量和定時器
            var i = 0 ;
            var timer;
             
            $(function(){
                  //用jquery方法設置第一張圖片顯示，其余隱藏
                  $(‘.ig‘).eq(0).show().siblings(‘.ig‘).hide();
                   
                  //調用showTime()函數（輪播函數）
                  showTime();
               
                  //當鼠標經過下面的數字時，觸發兩個事件（鼠標懸停和鼠標離開）
                  $(‘.tab‘).hover(function(){
                      //首先清除時間函數
                    clearInterval(timer);
                    //獲取當前i的值，調用輪播函數
                    i = $(this).index();
                    Show();
                  },function(){
                       //鼠標離開時開啟時間函數
                    showTime();
                  });
               
                //鼠標點擊左側的箭頭
                $(‘.btn1‘).click(function(){
                    clearInterval(timer);
                    if(i == 0){
                        //註意此時i的值
                          i = 5;
                    }
                    i--;
                    Show();
                    showTime();
                });
               
                //鼠標點擊右側的箭頭
                $(‘.btn2‘).click(function(){
                    clearInterval(timer);
                    if(i == 4){
                        //當圖片是最後一張時，點擊右箭頭，
                          i = -1;
                    }
                    i++;
                    Show();
                    showTime();
                });
            });
             
             
            //創建一個showTime函數
            function showTime(){
                  //設置定時器
                  timer = setInterval(function(){
                    //調用一個Show()函數
                    Show();
                    i++;
                    //當圖片是最後一張的後面時，設置圖片為第一張
                    if(i == 5){
                          i = 0;
                    }
                  },2000);
            }
             
            //創建一個Show函數
            function Show(){
                  //在這裏可以用其他jquery的動畫
                  $(‘.ig‘).eq(i).fadeIn(300).siblings(‘.ig‘).fadeOut(300);
               
                  //給.tab創建一個新的Class為其添加一個新的樣式，並且要在css代碼中設置該樣式
                  $(‘.tab‘).eq(i).addClass(‘active‘).siblings(‘.tab‘).removeClass(‘active‘);
            }

。

jQuery的幾種輪播