jQuery的幾種輪播

標籤：常用   center   總結   rgb   設定圖   定義   hover   全域   動畫   

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

第一種：

　　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的幾種輪播