用左和右滑动ul内容右箭头

Question

我尝试过使用左右箭头滑动UL内容的示例。我必须一次显示12个项目，当点击右箭头时，接下来应该显示12个项目并隐藏旧项目。点击左箭头时，应显示12个项目，预设12项应隐藏。

我试过但我无法完成。任何人都可以帮助完成这个例子。

link to my example is here

Answer 1

工作DEMO

试试这个，我为你创建了一个示例演示，你可以修改你想要的方式

<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--;
    }
});

希望这有帮助，谢谢