用左右箭头滑动ul内容

Question

我尝试了一个用左右箭头滑动UL内容的例子。我必须一次显示12个项目，当单击右箭头时，应显示下12个项目，并隐藏旧项目。单击左箭头时，应显示旧的12项，并预置12项。

我试过了，但无法完成。有人能帮我完成这个例子吗。

链接到我的例子在这里

Answer 1

工作演示

尝试一下，我已经为您创建了一个示例演示，您可以修改您想要的方式。

<div class="move left"><</div>
<div class="move right">></div>
<div id="container">
    <ul>
     <li id="box1" class="box current"><span>avsn9849625263</span></li>
      <li id="box2" class="box"><span>b.venkateshbabu07</span></li>
                  <li id="box3" class="box"><span>baburamesh_2008</span></li>
            <li id="box4" class="box"><span>baburamesh_ch1</span></li>
            <li id="box5" class="box"><span>chrb.rameshbabu</span></li>
            <li id="box6" class="box"><span>chrb.rameshbabu</span></li>
            <li id="box7" class="box"><span>chrb_rameshbabu</span></li>
            <li id="box8" class="box"><span>chrbrameshbabu51</span></li>

    </ul>
 </div>

代码

var i = 1;
$('.right').click(function () {
    if (i < $("#container ul li").length) {
        $("#box" + i).animate({
            left: '-50%'
        }, 400, function () {
            var $this = $("#box" + i);
            $this.css('left', '150%')
                .appendTo($('.container'));
        });
        $("#box" + i).next().animate({
            left: '50%'
        }, 400);
        i++;
    }
});
$('.left').click(function () {

    if (i > 1) {
        $("#box" + i).animate({
            left: '150%'
        }, 400, function () {
            var $this = $("#box" + i);
            $this.css('right', '-150%')
                .appendTo($('.container'));
        });
        $("#box" + i).prev().animate({
            left: '50%'
        }, 400);
        i--;
    }
});

希望这能帮上忙谢谢