我希望实现典型的分页行为,因此当我点击下一步时,上一页会向左和向右滚动。
目前有效,但没有移动到下一个数字。
希望通过下面的PNG更有意义
我的演示很明确,但我不能做更多。
我的jquery
$('ol > li').each(function() {
$(this).prepend("<a>" + ($(this).index() +1) + "</a>");
$('ol > li').eq(0).addClass('first-page');
$('ol > li').last().addClass('last-page');
$('ol > li').eq(-2).addClass('space').children('a').text('...');
$('ol > li').eq(1).css('margin-left', '40px');
$('ol > li').eq(6).addClass('seven').css('margin-right', '100px');
});
$('.pagination li').on('click', function(event) {
event.preventDefault();
var $this = $(this),
$pagination = $this.parent(),
$pages = $pagination.children(),
$active = $pagination.find('.active');
if($this.hasClass('a.prev')) {
if ($pages.index($active) > 0) {
$active.removeClass('active').prev().addClass('active');
}
} else if($this.hasClass('a.next')) {
if ($pages.index($active) < $pages.length - 1) {
$active.removeClass('active').next().addClass('active');
}
} else {
$this.addClass('active').siblings().removeClass('active');
}
$active = $pagination.find('.active');
$('a.prev')[$pages.index($active) == 0 ? 'addClass' : 'removeClass']('disabled');
$('a.next')[$pages.index($active) == $pages.length - 1 ? 'addClass' : 'removeClass']('disabled');
});
$('.pagination li:eq(0)').trigger('click');