Javascript 如何将项目列表转换为“a”；多页“；使用jquery创建列表

我有一个动态创建帖子列表的网站，但我无法访问创建内容的功能，因此我必须处理输出的内容

<div id="wrap">
    <div>Item 1</div>
    <div>Item 2</div>
    ...
    <div>Item 20</div>
    <div>Item 21</div>
</div>

使用

.slice

我已经能够针对7个集合，但至于如何隐藏和滚动集合，我有点不知所措

任何帮助都将不胜感激

将您的div id=#换行到另一个div中，并将高度设置为希望查看列表的多少，将溢出设置为隐藏。然后，您可以使用动画或addClass函数更改#wrap上的position:relative上下移动

编辑：好的，我已经做了一个JSFIDLE来完成上面描述的工作

这会产生您正在寻找的动画滑动效果

$(".next").click(function(){
  if($("#wrap").offset().top >= -126){
    $("#wrap").animate({top: '-=126px'});
   }
}); 

$('.prev').click(function() {
 if($("#wrap").offset().top <= 0){
  $("#wrap").animate({top: '+=126px'});
  }
});

$（“.next”）。单击（函数（）{
如果（$（“#包裹”）.offset（）.top>=-126）{
$（“#wrap”）.animate（{top:'-=126px'}）；
}
}); 
$（'.prev'）。单击（函数（）{
if（$（“#wrap”）.offset（）.top


var-page=1；
$（“#wrap>div”）.slice（0,7）.addClass（'page1'）.css（“背景”，“黄色”）；
$（“#wrap>div”）.slice（7,14）.addClass（'page2'）.css（“背景”，“红色”）.hide（）；
$（“#wrap>div”）.slice（14,21）.addClass（'page3'）.css（“背景”，“蓝色”）.hide（）；
var-maxPage=3；
$（'.next'）。在（'click'，function（）上{
如果（第页<最大页）{
$（“#wrap>div:visible”）.hide（）；
$（'.page'+++page.show（）；
}
})
$（'.prev'）。在（'click'，function（）上{
如果（第1页）{
$（“#wrap>div:visible”）.hide（）；
$（'.page'+--page.show（）；
}
})

项目1
项目2
项目3
项目4
项目5
项目6
项目7
项目8
项目9
项目10
项目11
项目12
项目13
项目14
项目15
项目16
项目17
项目18
项目19
项目20
项目21
下一个
上一篇
下面是这个答案的答案：

使用此解决方案，您还可以进行无休止的分页，因此在最后一页上单击“下一页”后，将显示第一页，如果在第一页上单击“上一页”，将显示最后一页

JavaScript

var itemBlockArray = new Array();
var currentIndex = 0;

itemBlockArray.push($("#wrap > div").slice(0,7).css("background","yellow"));
itemBlockArray.push($("#wrap > div").slice(7,14).css("background","red").hide());
itemBlockArray.push($("#wrap > div").slice(14,21).css("background","blue").hide());

$('.next').click(function() {
    itemBlockArray[currentIndex].hide();
    itemBlockArray[getPageIndex(1)].show();
});

$('.prev').click(function() {
    itemBlockArray[currentIndex].hide();
    itemBlockArray[getPageIndex(-1)].show();
});

function getPageIndex(indexAddition)
{
    var newIndex = currentIndex + indexAddition;

    if (newIndex < 0) {
        var lastPage = itemBlockArray.length - 1;
        currentIndex = lastPage
        return currentIndex;
    } else if (newIndex > (itemBlockArray.length - 1)) {
        currentIndex = 0;
        return currentIndex;
    }

    currentIndex = newIndex;

    return currentIndex;
}

var itemBlockArray=new Array（）；
var currentIndex=0；
itemBlockArray.push（$（“#wrap>div”）.slice（0,7）.css（“背景”、“黄色”）；
itemBlockArray.push（$（“#wrap>div”）.slice（7,14）.css（“背景”，“红色”）.hide（））；
itemBlockArray.push（$（“#wrap>div”）.slice（14,21）.css（“background”，“blue”）.hide（）；
$（'.next'）。单击（函数（）{
itemBlockArray[currentIndex].hide（）；
itemBlockArray[getPageIndex（1）].show（）；
});
$（'.prev'）。单击（函数（）{
itemBlockArray[currentIndex].hide（）；
itemBlockArray[getPageIndex（-1）].show（）；
});
函数getPageIndex（索引添加）
{
var newIndex=当前索引+索引添加；
如果（新索引<0）{
var lastPage=itemBlockArray.length-1；
currentIndex=最后一页
返回电流指数；
}else if（newIndex>（itemBlockArray.length-1））{
currentIndex=0；
返回电流指数；
}
currentIndex=newIndex；
返回电流指数；
}
只是为了好玩，还有一个不依赖于预先设置项目数量（如动态生成的项目数量…）并具有更改页面大小的变量


var$el=$（“#wrap>div”）；
var pageSize=7；
$el.slice（0，pageSize）.css（{background:'yellow'，display:'block'}）；
$el.slice（pageSize，$el.length）.css（{background:'yellow'，display:'none'）；
函数addSlice（num）{
返回num+pageSize；
}
函数减法切片（num）{
returnnum-pageSize；
}
var slice=[0，pageSize]；
$（'.next'）。单击（函数（）{
如果（片[1]<$el.length）{
slice=slice.map（addSlice）；
}
显示切片（切片）；
});
$（'.prev'）。单击（函数（）{
如果（片[0]>0）{
slice=slice.map（减去slice）；
}
显示切片（切片）；
});
函数showSlice（切片）{
$el.css（'display'，'none'）；
$el.slice（slice[0]，slice[1]）.css（'display'，'block'）；
}

项目1
项目2
项目3
项目4
项目5
项目6
项目7
项目8
项目9
项目10
项目11
项目12
项目13
项目14
项目15
项目16
项目17
项目18
项目19
项目20
项目21
下一个
上一篇
你可以试着看看这个对不起，我知道这更像是一个思路，而不是一个完整的答案，但我要去睡觉了。只想给我2美分：）这真是太棒了。这正是我想要的！我知道这不仅仅是为了看起来，但是有可能让它看起来像是在滑动吗？更多的是使用上面的代码滑动到左侧过渡？我可以使用.fadeIn或.fadeOut进行淡入淡出，但如果可能的话，我更喜欢它滑动。这正是我想要的！我知道这是更多的只是为了外观，但是否有可能让它看起来像是在滑动？更多的是使用上述代码向左滑动过渡？我可以使用.fadeIn或.fadeOut进行淡入淡出，但如果可能的话，我更喜欢它
var itemBlockArray = new Array();
var currentIndex = 0;

itemBlockArray.push($("#wrap > div").slice(0,7).css("background","yellow"));
itemBlockArray.push($("#wrap > div").slice(7,14).css("background","red").hide());
itemBlockArray.push($("#wrap > div").slice(14,21).css("background","blue").hide());

$('.next').click(function() {
    itemBlockArray[currentIndex].hide();
    itemBlockArray[getPageIndex(1)].show();
});

$('.prev').click(function() {
    itemBlockArray[currentIndex].hide();
    itemBlockArray[getPageIndex(-1)].show();
});

function getPageIndex(indexAddition)
{
    var newIndex = currentIndex + indexAddition;

    if (newIndex < 0) {
        var lastPage = itemBlockArray.length - 1;
        currentIndex = lastPage
        return currentIndex;
    } else if (newIndex > (itemBlockArray.length - 1)) {
        currentIndex = 0;
        return currentIndex;
    }

    currentIndex = newIndex;

    return currentIndex;
}