轮播图问题！！！

<div class="sn_top">
        <ul class="clearFix">
            /*JS动态插入最后一张图片（<li><a href="#"><img src="images/banner08.jpg" alt=""></a></li>）*/
            <li><a href="#"><img src="images/banner01.jpg" alt=""></a></li>
            <li><a href="#"><img src="images/banner02.jpg" alt=""></a></li>
            <li><a href="#"><img src="images/banner03.jpg" alt=""></a></li>
            <li><a href="#"><img src="images/banner04.jpg" alt=""></a></li>
            <li><a href="#"><img src="images/banner05.jpg" alt=""></a></li>
            <li><a href="#"><img src="images/banner06.jpg" alt=""></a></li>
            <li><a href="#"><img src="images/banner07.jpg" alt=""></a></li>
            <li><a href="#"><img src="images/banner08.jpg" alt=""></a></li>
            /*JS动态插入第一次图片（<li><a href="#"><img src="images/banner01.jpg" alt=""></a></li>）*/
        </ul>
        <ol>
        </ol>
</div>

//这里是JS代码
$(function () {
    Top();
});
var Top = function () {
    var sn_top=$(".sn_top");
    var top_ul = sn_top.find("ul:first");
    var top_ol = sn_top.find("ol:last");
    var lis = top_ul.children();
    var length = lis.length;
    var width = sn_top.width();
    //动态创建轮播图标签
    for (var i = 0; i < length; i++) {
        var ol_li = $("<li></li>");
        ol_li.appendTo(top_ol);
    }
    // 设置第一个li的样式
    top_ol.children("li").first().addClass("now");
    // 复制ul中第一个li和最后一个li并添加到最后和开始位置
    var ul_firstLi = lis.eq(0).clone(true).appendTo(top_ul);
    var ul_laststLi = lis.eq(length - 1).clone(true).insertBefore(lis.first());
    //无缝轮播
    var index = 1;
    var timerId = setInterval(function () {
        index++;
        top_ul.animate({transform: 'translateX(' + (- index * width) + 'px)'}, 500, function () {
            if (index >= 9) {
                index = 1;
                top_ul.css({transform: 'translateX(' + (-index * width) + 'px)'});
            }
        });
    }, 1000);
};
然后就是在谷歌浏览器中打开它会默认移动到我动态加入的第一张上面，到底哪里出错了，求大佬带带！！！