前段時間自己用jquery寫了一個banner輪播的插件

90%的網站都會有一個banner圖片輪播，只是大小不一樣而已。前段時間自己用jquery寫了一個banner輪播的插件，分享給大家。

下面是html代碼結構：

<div class="play_box"><!--動畫盒子,切換的時間間隔、圖片寬度，根據具體情況請到JS中修改相應參數-->

    <div class="imgBox">
        <img alt="" src="images/banner01.jpg" />
        <img alt="" src="images/banner02.jpg" />
        <img alt="" src="images/banner03.jpg" />
        <img alt="" src="images/banner04.jpg" />  
    </div>

    <span class="prev" title="上一張"></span>
    <span class="next" title="下一張"></span>

</div><!--動畫盒子結束-->

CSS代碼就不貼了，等下我會打包到文件中供大家下載使用。

下面是JS代碼（附詳細注釋）：

$(document).ready(function () {

    var img_length89 = $(".imgBox img").length; //獲取圖片張數


    /////////////////////請根據具體情況修改這裡的參數////////////////////////////////////////////////////

 //參數初始化設置

    img_animate(1002, img_length89, 3000, 'ddd');

  //////上面括號中的參數依次為圖片的寬度（根據自己網頁banner的寬度作相應設置），一共有幾張圖片（這個會自動判斷不用手動寫入），圖片切換間隔幾秒（1000為一秒），圖片下方的小按鈕獲得焦點時的類名(這個類名修改後，須在CSS文件中修改相應的CSS設置，建議不修改。)

 //////////////////////////////////////////////////////////////////////////////////////////////////////////////////

 var img_number = 1;  //圖片當前處於第幾張

/////下一張、、、、、、、三個參數分別是圖片寬度，圖片總數量，跟圖片相對應的小按鈕的類名

 function next_btn(img_width, img_quantity, pic_btn_name) {

 $(".pic_btn_list li").removeClass(pic_btn_name); //去掉類名為.pic_btn_list元素下的li標簽的pic_btn_name類名;

//給下一張圖片相對應的li標簽小按鈕設置一個類名pic_btn_name，因為img_number從1開始，而li標簽的遍歷是從0開始。

 $(".pic_btn_list li:eq(" + img_number + ")").addClass(pic_btn_name);

 if (img_number == img_quantity) {//如果已經是最大數（指最後一張圖片）

        $(".pic_btn_list li:eq(0)").addClass(pic_btn_name); //給第一個li標簽設置類名。

        //////執行相應的動畫

        $(".imgBox img").animate({