问题如上，容我先说明下状况。

HTML代码：

    

        
1
        
2
        
3
        
4
        
5
    
    

        
1
        
2
        
3
        
4
        
5
    

CSS代码：

*{margin: 0;padding: 0;}
li{list-style: none;float: left;}
ul{display: inline-block;}
#out{
    border: 1px solid #000000;
    position: relative;
    width: 200px;
    height: 200px;
    margin: 50px;
    overflow: hidden;
}
#big{
    display: inline-block;
    position: absolute;
    overflow: hidden;
    width: 1000px;
}
#big li{
       width: 200px;
    height: 200px;
    float: left;
    text-align: center;
    background-color: #A9A9A9;
    border-radius: 20px;
}
#small{
    overflow: hidden;
    position: absolute;
    bottom: 0;
}
#small li{
    width: 20px;
    height: 20px;
    text-align: center;
    background-color: #19AFED;
    margin: 10px;
    border-radius: 10px;
}
#small .show{
    color: red;
}

就是下图这个样子：

目前我会写两种无缝滚动的代码。

第一种无缝滚动：

var thebig = $("#big");
var biglinum = 0;
var biglilen = $("#big li").length;
var bigliwid = $("#big li").width();

var scroll = function(){

    var thebigli = thebig.find("li:first-child");
    var liwidth = thebigli.width();                
    thebigli.animate({
        "margin-left": -liwidth+"px"
    },300,function(){
        thebigli.css("margin-left",0).appendTo(thebig);
    });
    
    if(biglinum

var biglinum = 0;
var biglilen = $("#big li").length;
var bigliwid = $("#big li").width();

var scroll = function(){    

    if(biglinum