我有以下代码:
<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(){
});
当我点击右键时，我需要显示接下来的三里，当我点击左边的按钮时，我需要显示前三里。像内容 slider 之类的东西。
最佳答案
有更好的方法可以做到这一点。这个示例确实经过简化，可以帮助您了解正在发生的情况，但它应该可以帮助您走上正确的轨道: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>
关于javascript - 选择一组三个 li 并将它们显示在下一个或上一个按钮上，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26917233/