选择一组三里并将它们显示在下一个或上一个按钮上

Select set of three li and display them on next or previous button

本文关键字：下一个 显示 上一个 按钮 一组 选择 三里      更新时间：2023-09-26

我有以下代码：

<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>

Css：

.firstSlide{
    color:blue;
}
.secondSlide{
    color:red;
}
.thirdSlide{
    color:green;
}
.show{
    display:block;
}
.hide{
    display:none;
}

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

当我单击右键时，我需要显示接下来的三个里，当我单击左按钮时，我需要显示前三个里。类似于内容滑块的东西。

有更好的方法可以做到这一点。 这个例子真的很简化，可以帮助你了解正在发生的事情，但它应该帮助你走上正确的轨道：http://jsfiddle.net/ps2s0m08/3/

<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>
相关文章：