jQuery轮 播的封装

Posted 2020-09-26 那一刻~~~掩护你

　　今天来聊聊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的一个轮播图。