JQuery进行无缝滚动时怎样写小标签跳转和方向箭头？

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

HTML代码：

<div id="out">
    <ul id="big">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
    <ul id="small">
        <li class="show">1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
</div>

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<biglilen-1){
        biglinum++;
    }else{
        biglinum=0;
        }
    $("#small li").removeClass("show").eq(biglinum).addClass("show");
    
}

setInterval(function(){
    scroll()
},2000)

这种无缝滚动在运作的时候改变了原大 ul 的 li 标签的序列，所以如果想改变小 ul 的 li 的CSS只能另外添加 if 判断。

第二种无缝滚动：

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

var scroll = function(){    

    if(biglinum<biglilen-1){
        biglinum++;
    }else{
        biglinum=0;
    }
    
    $("#big").animate({"margin-left":-biglinum*bigliwid},300);
    $("#small li").removeClass("show").eq(biglinum).addClass("show");
    
}

setInterval(function(){
    scroll()
},2000)

这种无缝滚动在最后一个 li 的位置强行将 margin-left 归零，和上一个方法在视觉效果上有些差距。

然后我想问的是，在这样两个无缝滚动代码基础上，我希望能有一个可控的方向箭头，而且小 ul 的 li 可以点击并且跳转到相应的大 ul 的 li 块上去。但是却不知道该怎样理解。

如果单纯的判断大 ul 的 margin-left，那么到边界了怎么办？而且第一种方法会改变 li 的序列，判断margin-left不现实。而且小 ul 的点击跳转也没弄明白。

所以请各位指点一下吧。谢谢。