今天來聊聊jQuery輪播的封裝！

　　我自己封裝了一個圖片寬1200px，高400px的無縫滾動輪播圖；話不多說看看代碼吧！

Js:

/**
 * Created by Administrator on 2017/7/1 0001.
 */
$(function(){
    var timer1=null;
    var timer2=null;
    var q=1;
    var x=-1200;    //剛開始讓第一張圖片展現出來
//            向左移動
    leftstar()
    function leftstar(){
        //設定計時器
        timer1=setInterval(function(){
            
 
//每走完一張，對應小白點對應顯示
            if(x%1200==0){
                stop(1);//關閉向右走的計時器
                xiaobia(Math.abs(x/1200)-1)
            }
            //當一輪圖片走完，又返回原來的為位置接著走，依次循環
            if(x==-6000){
                x=-1200;
            }
            $("#imgs").css("left",x+"px");
            x-=5
        },30)
    }
 
//            向右移動
    function rightstar(){
        timer1=setInterval(function(){
            if(x%1200==0){
                stop(2);//關閉向左走的計時器
                xiaobia(Math.abs(x/1200)-1)
            }
            if(x==0){
                x=-4800;
            }
            $("#imgs").css("left",x+"px");
            x
 
+=5

        },30)
    }
//            停止計時器
    function stop(q){
        clearInterval(timer1);
        clearTimeout(timer2);
        if(q==1){
            timer2=setTimeout(leftstar,500)
        }
        if(q==2){
            timer2=setTimeout(rightstar,500)
        }
    }

//            移入移出
    $("#banner").hover(function(){
        stop()
    },function(){
        stop(q)
    });
    //向左走的按鈕
    $("#left_Btn").click(function(){
        stop(1)
        q=1;
    });
    //向右走的按鈕
    $("#right_Btn").click(function(){
        stop(2)
        q=2;
    })

//            小白點
    function xiaobia(num){
        if(num==4){
            num=0
        }
        if(num==-1){
            num=3
        }
        $("#biao li").eq(num).css("background","red")
        $("#biao li").eq(num).siblings().css("background","white")
    }
    $("#biao li").hover(function(){
        xiaobia($(this).index())
        $("#imgs").css("left",-($(this).index()*1200)-1200)
        x=-($(this).index()*1200)-1200
    })
})

css:

/*4+2   width:1200px;*/
*{
    margin: 0;
    padding: 0;
}

/*最外層的div*/
#banner{
    width: 1200px;
    height: 400px;
    position: relative;
    top: 100px;
    left: 10%;
    overflow: hidden;
}
/*包裹圖片的ul*/
#imgs{
    width: 7200px;
    height: 400px;
    position: absolute;
    left: -1200px;
}
#imgs li{
    float: left;
    list-style: none;
}
#imgs li img{
    width: 1200px;
    height: 400px;
}
/*小圓點的父級*/
#biao{
    width: 200px;
    height: 50px;
    position: absolute;
    left: 35%;
    bottom: 0;
}
/*小圓點*/
#biao li{
    float: left;
    list-style: none;
    margin-left: 20px;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    color: #007ed9;
    line-height: 30px;
    background: white;
    text-align: center;
}
/*左右按鈕的父級*/
ol{
    width: 1200px;
    height: 50px;
    text-align: center;
    line-height: 50px;
    position: absolute;
    left: 0;
    top:35%;
}
ol li{
    font-size: 30px;
    list-style: none;
    width: 50px;
    height: 50px;
    color: white;
    position: absolute;
    background: rgba(0,0,0,.5);
}
/*左按鈕*/
#left_Btn{
    left: 0;
}
/*右按鈕 */
#right_Btn{
    right: 0;
}

html:

/*4+2   width:1200px;*/
*{
    margin: 0;
    padding: 0;
}

/*最外層的div*/
#banner{
    width: 1200px;
    height: 400px;
    position: relative;
    top: 100px;
    left: 10%;
    overflow: hidden;
}
/*包裹圖片的ul*/
#imgs{
    width: 7200px;
    height: 400px;
    position: absolute;
    left: -1200px;
}
#imgs li{
    float: left;
    list-style: none;
}
#imgs li img{
    width: 1200px;
    height: 400px;
}
/*小圓點的父級*/
#biao{
    width: 200px;
    height: 50px;
    position: absolute;
    left: 35%;
    bottom: 0;
}
/*小圓點*/
#biao li{
    float: left;
    list-style: none;
    margin-left: 20px;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    color: #007ed9;
    line-height: 30px;
    background: white;
    text-align: center;
}
/*左右按鈕的父級*/
ol{
    width: 1200px;
    height: 50px;
    text-align: center;
    line-height: 50px;
    position: absolute;
    left: 0;
    top:35%;
}
ol li{
    font-size: 30px;
    list-style: none;
    width: 50px;
    height: 50px;
    color: white;
    position: absolute;
    background: rgba(0,0,0,.5);
}
/*左按鈕*/
#left_Btn{
    left: 0;
}
/*右按鈕 */
#right_Btn{
    right: 0;
}

這個封裝只能適用於圖片寬為1200px，高為400px的一個輪播圖。

jQuery輪 播的封裝