Javascript 选择一组三个li，并在“下一个”或“上一个”按钮上显示它们_Javascript_Jquery_Html

Javascript 选择一组三个li，并在“下一个”或“上一个”按钮上显示它们

javascript jquery html

Javascript 选择一组三个li，并在“下一个”或“上一个”按钮上显示它们,javascript,jquery,html,Javascript,Jquery,Html,我有以下代码： <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> <li>9

我有以下代码：

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>

    </ul>


</div>
<button id="but1">left</button>
<button id="but2">right</button>

Jquery：

$("#news ul").each(function(){
  $(this).find("li").slice(0,3).addClass("firstSlide show");  
  $(this).find("li").slice(3,6).addClass("secondSlide hide");
  $(this).find("li").slice(6,9).addClass("thirdSlide hide");
})

$("#but2").on('click',function(){

});

$("#but1").on('click',function(){

});

我需要在单击右键时显示下一个三个li，在单击左键时显示前三个li。类似于内容滑块的东西

有更好的方法可以做到这一点。本示例经过简化，有助于您了解发生了什么，但它应该有助于您走上正确的道路：



一,
二,
三,
四,
五,
六,
七,
八,
九,

左边
正确的
$（“ul”）。每个（功能）{
$（this.find（“li”）.slice（0,3）.addClass（“first”）；
$（this.find（“li”）.slice（3,6.addClass（“second”）.hide（）；
$（this.find（“li”）.slice（6,9）.addClass（“third”）.hide（）；
})
$（“#但是2”）。在（'click'，函数（）{
if（$（（“li:visible”）.hasClass（“first”））{
$（“.first”）.hide（）；
$（“.second”）.show（）；
}
else if（$（（“li:visible”）.hasClass（“second”））{
$（“.second”）.hide（）；
$（“.third”）.show（）；
}
else if（$（（“li:visible”）.hasClass（“第三”））{
$（“.third”）.hide（）；
$（“.first”）.show（）；
}
});
$（“#but1”）。在（'click'，函数（）{
if（$（（“li:visible”）.hasClass（“first”））{
$（“.first”）.hide（）；
$（“.third”）.show（）；
}
else if（$（（“li:visible”）.hasClass（“second”））{
$（“.second”）.hide（）；
$（“.first”）.show（）；
}
else if（$（（“li:visible”）.hasClass（“第三”））{
$（“.third”）.hide（）；
$（“.second”）.show（）；
}
});

你应该把它放在钢笔或小提琴里。

$("#news ul").each(function(){
  $(this).find("li").slice(0,3).addClass("firstSlide show");  
  $(this).find("li").slice(3,6).addClass("secondSlide hide");
  $(this).find("li").slice(6,9).addClass("thirdSlide hide");
})

$("#but2").on('click',function(){

});

$("#but1").on('click',function(){

});

<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
    </ul>
<button id="but1">left</button>
<button id="but2">right</button>

<script>
    $("ul").each(function () {
        $(this).find("li").slice(0, 3).addClass("first");
        $(this).find("li").slice(3, 6).addClass("second").hide();
        $(this).find("li").slice(6, 9).addClass("third").hide();
    })

    $("#but2").on('click', function () {
        if ($("li:visible").hasClass("first")) {
            $(".first").hide();
            $(".second").show();
        }
        else if ($("li:visible").hasClass("second")) {
            $(".second").hide();
            $(".third").show();
        }
        else if ($("li:visible").hasClass("third")) {
            $(".third").hide();
            $(".first").show();
        }
    });

    $("#but1").on('click', function () {
        if ($("li:visible").hasClass("first")) {
            $(".first").hide();
            $(".third").show();
        }
        else if ($("li:visible").hasClass("second")) {
            $(".second").hide();
            $(".first").show();
        }
        else if ($("li:visible").hasClass("third")) {
            $(".third").hide();
            $(".second").show();
        }
    });
</script>
</body>