JS自动翻页代码

2025-11-05 05:53:05

1、首先我们来看看效果吧，在静态页面完成这些工作。

JS自动翻页代码

2、核心部分Javascript部分

$(document).ready(function () { var pageItem = 30; $(document).ready(function () { var _Nav = $('#pagnation'); var total = Math.ceil($(".newsList ul li").length / pageItem); var current = 1; createLinks(); selectPage(current); function createLinks() { _Nav.append('<a id="btnPrev">Prev</a>'); for (var i = 0; i < $(".newsList ul li").length / pageItem; i++) { _Nav.append('<a class="numlink">' + (i + 1) + '</a>'); } _Nav.append('<a id="btnNext">Next</a>'); } $(".newsList ul li:gt(" + parseInt(pageItem - 1) + ")").hide(); $("#btnPrev").css("display", "none").click(function () { $("#btnNext").css("display", "inline"); current -= 1; $(".newsList ul li").show(); var indexStart = (current - 1) * pageItem; var indexEnd = indexStart + pageItem - 1; $("li:lt(" + indexStart + "), li:gt(" + indexEnd + ")", $("ul")).hide(); if (current == 1) $(this).css("display", "none"); selectPage(current); }); $("#btnNext").click(function () { $("#btnPrev").css("display", "inline"); current += 1; $(".newsList ul li").show(); var indexStart = (current - 1) * pageItem; var indexEnd = current * pageItem - 1 > $("ul li").length - 1 ? $("ul li").length - 1 : current * pageItem - 1; $("li:lt(" + indexStart + "), li:gt(" + indexEnd + ")", $("ul")).hide(); if (current == total) $(this).css("display", "none"); selectPage(current); }); $(".numlink").click(function () { var selectValue = $(this).text(); current = parseInt(selectValue); $("#btnPrev").css("display", "inline"); $("#btnNext").css("display", "inline"); if ((current == 1)) { $("#btnPrev").css("display", "none"); } else if (current == total) { $("#btnNext").css("display", "none"); } $(".newsList ul li").show(); var indexStart = (current - 1) * pageItem; var indexEnd = current * pageItem - 1 > $("ul li").length - 1 ? $("ul li").length - 1 : current * pageItem - 1; $("li:lt(" + indexStart + "), li:gt(" + indexEnd + ")", $("ul")).hide(); selectPage(current); }) function selectPage(pageIndex) { _Nav.find("a").css("color", "#0072BC"); _Nav.find("a").eq(parseInt(pageIndex)).css("color", "red"); $(".navigation ul li").css("display", "block"); $("#foot ul li").css("display", "block"); $("#top ul li").css("display", "block"); $("#leftbar ul li").css("display", "block"); } });});

JS自动翻页代码

3、下面是css代码

.page { display: none; } #pagnation a { padding-right: 5px; } .current { color: blue; } #pagnation { margin: 20px 0px; float: left; } .numlink, #btnPrev, #btnNext { background-color: #F5F5F5; border: 1px solid #EBEBEB; color: #0072BC; font-weight: normal; margin-left: 10px; padding: 2px 7px; text-decoration: none; width: 22px; ; } .current { background-color: #DDEEFF; border: 1px solid #BBDDFF; color: #0072BC; cursor: default; margin-left: 10px; padding: 2px 7px; text-decoration: none; }

JS自动翻页代码

4、看看html结构

<ul>

</ul>

</div>

这个不需要配图了，配个风景图

JS自动翻页代码

声明：本网站引用、摘录或转载内容仅供网站访问者交流或参考，不代表本站立场，如存在版权或非法内容，请联系站长删除，联系邮箱：site.kefu@qq.com。