无缝轮播需要考虑以下几点 : 
1) 移动一张是移动容器的整个宽度
    在做移动时需要每次一动都移动 100% ,一个 100% 刚好是容器的一个宽度
2)移动第一帧时在向前移动需要显示最后一帧的内容
    我们需要将最后一帧的内容添加到第一帧前面,在向前移动时就可以显示最后一帧的内容,动画执行完毕后立即将父容器的位置定位后到最后一帧上,这样就可以做一个障眼法的效果
3)移动到最后一帧时在向后移动显示第一帧的内容
    与上面方法一样


<style type="text/css">
    .banner{
        position: relative;
        height: 500px;
        width: 100%;
        overflow: hidden;
    }
    .banner ul{
        position: absolute;
        left: 0;
        top: 0;
    }
    .banner ul,.banner ul li{
        height: 100%;
        width: 100%;
    }
    .banner ul li{
        float: left;
        font-size: 30px;
        font-weight: bold;
        text-align: center;
    }

    .banner .chevron i{
        position: absolute;
        top: 50%;
        height: 60px;
        margin-top: -30px;
        width: 30px;
        cursor: pointer;
        display: inline-block;
        font-size: 32px;
        line-height: 60px;
        background: rgba(255,255,255,0.5);
    }
    .banner .chevron .glyphicon-chevron-left{
        left: 10px;
    }
    .banner .chevron .glyphicon-chevron-right{
        right: 10px;
    }
</style>



<div class="banner" data-main="ul" data-child="li">
    <ul>
    	<li><em class="middle"></em><i>1</i></li>
    	<li><em class="middle"></em><i>2</i></li>
    	<li><em class="middle"></em><i>3</i></li>
    	<li><em class="middle"></em><i>4</i></li>
    	<li><em class="middle"></em><i>5</i></li>
    </ul>
    <div class="chevron">
    	<i class="glyphicon glyphicon-chevron-left" data-dir="-1"></i>
    	<i class="glyphicon glyphicon-chevron-right" data-dir="1"></i>
    </div>
    <div class="loading"></div>
</div>

<script type="text/javascript">
    var banner = $(".banner");  //获取 banner 对象
    var ul = $("ul",banner);    //获取 ul 对象
    var li = $("li",ul);

    ul.append(li.first().clone()); //把第一帧复制到最后一帧后面
    ul.prepend(li.last().clone()); //把最后一帧复制到第一帧前面

    li = $("li",ul);     //重新获取最新的 li

    ul.width((100 * li.length) + "%");  // ul 设置实际宽度(根据 li 个数而来)
    li.width((100 / li.length) + "%");      //给每一个 li 设置实际宽度
    var index = 0 + 1; //正常情况下标都是从 0 开始,因为在上面添加了一帧在前面,所以这里  1
    // banner 移动动画
    function move(animate){
        var trigger = function(){
            //判断下标
            if(index >= li.length - 1){
                index = 0 + 1;
                move("css");
            }else if(index <= 0){
                index = li.length - 2;
                move("css");
            }
        }
        if(animate == "css"){
            ul.css({
                left: (index * 100 * -1)+"%" // 100% 移动
            });
        }else{
            ul.stop().animate({
                left: (index * 100 * -1)+"%" // 100% 移动
            }, 1000, trigger);
        }
    }
    //左右按钮事件
    banner.on("click",".chevron i",function(e){
        index += $(this).data("direction");
        move();
    });

    move("css"); //初始化 banner 位置
</script>