今天来聊聊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:

     
     
      
         
       
         
       
         
       
         
       
         
       
         
       
     
      
     
      
         
       
         
       
         
       
         
       
         
       
     
      
     
      
         
       
 < 
         
       
 > 
     
      
 
     

      这个封装只能适用于图片宽为1200px，高为400px的一个轮播图。