利用is做暗箱操作

css

*{margin: 0; padding: 0;list-style: none;}   
        div.box{width: 260px;height: 60px;overflow: hidden;padding:10px ;margin:50px auto;background-color:skyblue;position:relative;}
       .box ul{width: 2000em;height: 60px;position:absolute;}
       .box ul li{float: left;width: 80px;height: 60px;margin-right: 10px;background-color:pink;color:white;line-height: 60px;text-align: center;font-size: 20px;} 
       div.box a{position:absolute;width: 20px;height: 20px;border-radius:50%;text-align: center;line-height: 20px;font-size: 14px;background-color:yellow;left:1px;top:50%;transform:translateY(-50%);text-decoration:none;z-index: 3;;}
       div.box a:nth-of-type(2){left:258px;}

html

<div class="box">
        <a href="#" class="prev">&lt</a>
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
            <li>7</li>
            <li>8</li>
            <li>9</li>
            <li>10</li>
        </ul>
        <a href="#" class="next">&gt</a>
    </div>

js

 $(function(){
        var u = $('ul');
        var i = 3;
        var m = 3;
        var lil = u.children('li').length; //遍历长度
        $('.next').click(function(event) {
             if(!u.is(":animated")){
                if(lil>i){
                    i++;
                    u.animate({"left": "-=90px"}, 600);
                }
             }
        });

        $('.prev').click(function(event) {
            if(!u.is(":animated")){
                if(i>m){ //判断 i 是否小于总的个数
                    i--;
                    u.animate({"left": "+=90px"}, 600);
                }
            }
        });
    })