jQuery輪 播的封裝

標籤：clear   ack   over   height   float   jquery   pre   img   abs   

　　今天來聊聊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輪 播的封裝