用左右箭头滑动内容

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

希望这会有所帮助，谢谢