Question

目前点击下一个和上一个，列表的高度正在调整。我想用新的内容集替换当前内容，而不是增加和减少高度。

期望：

如果我点击下一个/上一个，当前可见列表应该替换为带有一些幻灯片动画的新项目集。
每次我需要显示3个项目时，在当前场景中，一旦下一个/上一个迭代完成，只有2个项目可见。

这就是我的尝试：

JS：

$(document).ready(function () {
    size_li = $("#list li").size();
    x=3;
    $('#list li:lt('+x+')').show();
    $('#next').click(function () {
        x= (x+3 <= size_li) ? x+3 : size_li;
        $('#list li:lt('+x+')').show();
         $('#prev').show();
        if(x == size_li){
            $('#next').hide();
        }
    });
    $('#prev').click(function () {
        x=(x-3<0) ? 3 : x-3;
        $('#list li').not(':lt('+x+')').hide();
        $('#next').show();
        if(x < 3){
            $('#prev').hide();
        }
    });
});

JS小提琴：

Demo Link

Answer 1

我对这个问题的看法略有不同。这是fiddle。

我的解决方案的要点是我使用了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

<强>更新

这里有更新的fiddle。

我已根据当前显示的页面添加了隐藏或显示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();
    }
};

Answer 2

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

＆＃13;

$(document).ready(function () {
    
    $('#list li:lt(3)').show();
   
   $('#next').click(function() {
   	$('#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().is(':visible')){
    	 $this.hide();
    }
	});
  
  $('#prev').click(function() {
  	$('#next').show();
    var first = $('#list').children('li:visible:first');
    first.prevAll('#list li:lt(3)').toggle(200);
    first.prev().nextAll('#list li').hide(200)
    
    var $this = $(this);
    if ($('#list li').first().is(':visible')){
    	 $this.hide();
    }
	});
  
});

＆＃13;

ul,li,ol{
  margin: 0;
  padding: 0;
  list-style-type: none;
}
.l_swiper{
  border: 1px solid #333;
  width: 50%;
  padding: 20px;
}

#list{
  overflow: hidden;
  max-height: 117px;
}
#list li{ 
  display: none;
  padding : 10px;
  border-bottom : 1px solid #333;
}
#list li:last-child{
  margin-bottom: 39px;
}
#next{
  float: right;
  border: 1px solid #333;
  padding: 10px;
  margin-top : 20px;
  cursor: pointer;
}
#prev{
  float: left;
  border: 1px solid #333;
   padding: 10px;
   margin-top : 20px;
   cursor: pointer;
}
.clearfix{
  clear: both;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="l_swiper">
  <ul id="list">
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
    <li>Four</li>
    <li>Five</li>
    <li>Six</li>
    <li>Seven</li>
    <li>Eight</li>
</ul>
<div id="prev">prev</div>
<div id="next">Next</div>
<div class="clearfix"></div>
</div>

＆＃13;

如何为自定义垂直滑块Jquery

2 个答案: