新手jquery问题 图片循环滚动

Question

刚才经过几个大神的指点。 现在已经可以左右滚动和自动滚动了，现在想让他 循环起来。 自己模仿网上别人的代码 好像是要把之前的ul复制一边。便于循环。 可是具体的效果还是没有能够实现。。 原理还不是太懂var data = {
interval:5000, //翻页间隔(单位毫秒)
focusWrap:".focus-body",
leftBtn:".leftBtn", //左边按钮的class
rightBtn:".rightBtn", //右边按钮的class
speed:149, //翻页距离
list2:$("#list1 li").clone(true).insertAfter("#list1").wrapAll("<ul id='list2'></ul>"),//复制一个list
/*----自动滚动----*/
ljl_AutoPlay:function(){
/*----左侧按钮添加点击事件----*/
$(data.leftBtn).click(function(){
$(data.focusWrap).animate({left :'+=' + data.speed},"normal");
});
/*----右侧按钮添加点击事件----*/
$(data.rightBtn).click(function(){
            $(data.focusWrap).animate({left :'-=' + data.speed},"normal");
        });
setInterval(data.ljl_GoRight,data.interval);
},
ljl_GoRight:function(){
        $(data.rightBtn).trigger('click');//触发右边按钮的点击事件
},
}
data.ljl_AutoPlay();<div class="focus">
<div class="leftBtn"></div>
    <div class="rightBtn"></div>
    <div class="focus-warp">
     <div class="focus-body">
     <ul id="list1">
         <li><a href="#" target="_blank"><img src="http://img1.gtimg.com/auto/pics/hv1/204/29/1001/65097624.jpg" alt="图片属性" /></a></li>
            <li><a href="#" target="_blank"><img src="http://img1.gtimg.com/auto/pics/hv1/204/29/1001/65097624.jpg" alt="图片属性" /></a></li>
            <li><a href="#" target="_blank"><img src="http://img1.gtimg.com/auto/pics/hv1/204/29/1001/65097624.jpg" alt="图片属性" /></a></li>
            <li><a href="#" target="_blank"><img src="http://img1.gtimg.com/auto/pics/hv1/204/29/1001/65097624.jpg" alt="图片属性" /></a></li>
            <li><a href="#" target="_blank"><img src="http://img1.gtimg.com/auto/pics/hv1/204/29/1001/65097624.jpg" alt="图片属性" /></a></li>
            <li><a href="#" target="_blank"><img src="http://img1.gtimg.com/auto/pics/hv1/204/29/1001/65097624.jpg" alt="图片属性" /></a></li>
        </ul>
     </div>
    </div>
</div>/*reset*/
ul,li{ list-style:none; margin:0; padding:0;}
/*main*/
.focus{ position:relative; border:1px solid #000; width:960px; height:174px; margin:0 auto; }
.leftBtn{ position:absolute; background:url(http://mat1.gtimg.com/auto/07np/bj2012/lorr.png) no-repeat 0 0; height:174px; width:21px; cursor:pointer;}
.rightBtn{ position:absolute; background:url(http://mat1.gtimg.com/auto/07np/bj2012/lorr.png) no-repeat 0 bottom; height:174px; width:21px; right:0; cursor:pointer;}
.focus-warp{position:absolute; left:21px; overflow:hidden; height:174px; width:894px; padding-left:23px;}.focus-body{ position:absolute; width:9999px;}/*left的宽度等于21px(按钮的宽度)+li的marginright*/.focus-body ul li{ float:left; margin-right:22px; display:inline; width:127px;height: 174px;}

Answer 1

将第一个li复制，然后附加至<ul id="list1">尾部
1:当前显示哪一张图片，记录它的序列[比如变量名为:idx]
2:
[从左向右滑行]即显示上一张时
当滚动到原来的第一张时，设置
2.1:当前显示的序号为:idx=子项的总数：你这里就是6了
2.2:list1.css({left:-(单项的宽)*子项的总数})3:
[从右向左滑行]即显示下一张时
当滚动到原来的最后一张时，设置
3.1:当前显示的序号为:idx=0
3.2:list1.css({left:0})