Javascript 如何设置自定义垂直滑块Jquery的动画

当前，单击“下一步”和“上一步”，列表的高度正在调整。我想用一组新内容替换当前内容，而不是增加或减少高度

期望：

如果单击“下一步/上一步”，当前可见列表应替换为带有幻灯片动画的新项目集

而且每次我需要显示3个项目时，在当前场景中，一旦下一个/上一个迭代完成，只有2个项目可见

这就是我所尝试的：

JS:

$（文档）.ready（函数（）{
size#li=$（“#list li”）.size（）；
x=3；
$（'#list li:lt（'+x+'））.show（）；
$（“#下一步”）。单击（函数（）{
x=（x+3我处理这个问题的方式有点不同

我的解决方案的要点是，我使用jQuery的
animate
函数来实现平滑滚动效果：

$('ul').animate({
    scrollTop: $('ul').scrollTop() + height_to_show
}, 500);

然而，一个问题是
ul
和
li
元素需要固定高度。这些高度是根据您设置的以下变量在内部计算的：

/**
 * Total number of elements in the list
 * @type {Number}
 */
var num_of_elems = 8;

/**
 * Static height of each element (in pixels)
 * @type {Number}
 */
var height_of_elem = 25;

/**
 * Number of elements you want to show in the page
 * @type {Number}
 */
var num_of_elems_to_show = 3;

/**
 * The visible height of the ul
 * @type {Number}
 */
var height_to_show = 0; //calculated internally


更新

这是最新消息

我添加了根据当前显示的页面隐藏或显示
prev
和
next
按钮的功能

/**
 * Show or hide the prev and next button depending on the current_page
 */
var show_hide_buttons = function() {
    if (current_page === Math.ceil(num_of_elems / num_of_elems_to_show) - 1) {
        $('#next').hide();
    } else {
        $('#next').show();
    }

    if (current_page === 0) {
        $('#prev').hide();
    } else {
        $('#prev').show();
    }
};

我知道你有一个解决方案，只是想离开这个小提琴，因为这是另一个选择和小不同的动画


$（文档）.ready（函数（）{
$（“#list li:lt（3）”.show（）；
$（“#下一步”）。单击（函数（）{
$（'#prev'）.show（）；
var last=$（“#list”）.children（'li:visible:last'）；
last.nextAll（“#list li:lt（3）”）.toggle（200）；
last.next（）.prevAll（'#list li'）.hide（200）；
var$this=$（this）；
if（$（'#list li'）.last（）是（':visible'））{
$this.hide（）；
}
});
$（'#prev'）。单击（函数（）{
$（“#下一步”）.show（）；
var first=$（“#list”）.children（'li:visible:first'）；
第一。prevAll（“#list li:lt（3）”）。切换（200）；
first.prev（）.nextAll（'#list li'）.hide（200）
var$this=$（this）；
if（$（'#list li'）.first（）是（':visible'））{
$this.hide（）；
}
});
})；
ul、li、ol{
保证金：0；
填充：0；
列表样式类型：无；
}
.l_swiper{
边框：1px实心#333；
宽度：50%；
填充：20px；
}
#名单{
溢出：隐藏；
最大高度：117px；
}
#列表li{
显示：无；
填充：10px；
边框底部：1px实心#333；
}
#李：最后一个孩子{
边际下限：39px；
}
#下一个{
浮动：对；
边框：1px实心#333；
填充：10px；
边缘顶部：20px；
光标：指针；
}
#上{
浮动：左；
边框：1px实心#333；
填充：10px；
边缘顶部：20px；
光标：指针；
}
.clearfix{
明确：两者皆有；
}


一个
两个
三
四
五
六
七
八

上
下一个
这就是我要找的，但是你能根据列表的长度隐藏和显示下一个和上一个按钮吗？你的意思是在第一页上不会显示
prev
按钮吗？同样，在最后一页上的
next
按钮？是的，初始上一个按钮不应该显示，一旦你达到列表的限制，那么下一步就不应该展示我的答案和小提琴了。
/**
 * Show or hide the prev and next button depending on the current_page
 */
var show_hide_buttons = function() {
    if (current_page === Math.ceil(num_of_elems / num_of_elems_to_show) - 1) {
        $('#next').hide();
    } else {
        $('#next').show();
    }

    if (current_page === 0) {
        $('#prev').hide();
    } else {
        $('#prev').show();
    }
};