javascript - 使用左右箭头滑动 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--;
    }
});

希望这会有所帮助，谢谢