jQuery客户端分页

最新推荐文章于 2024-11-04 16:17:23 发布

张发_2012

最新推荐文章于 2024-11-04 16:17:23 发布

阅读量809

点赞数 1

分类专栏： jQuery应用文章标签： jquery javascript function div

本文链接：https://blog.csdn.net/zhangjf20120224/article/details/7571241

版权

jQuery应用专栏收录该内容

3 篇文章 0 订阅

订阅专栏

 <script src="/js/jquery-1.4.1.js" type="text/javascript"></script>
    <script type="text/javascript">
        var pageindex = 1;
        var pagesize = 2;
        $(function () {
            previous();
        })
        function previous() {
            if (pageindex < 1 || pageindex == 1) {
                pageindex = 1;
                $("#imgdiv img:lt(" + pagesize + ")").show();
                $("#imgdiv img").not($("#imgdiv img:lt(" + pagesize + ")")).hide();
            }
            else {
                pageindex--;
                if (pageindex != 1) {
                    $("#imgdiv img:gt(" + ((pageindex - 1) * pagesize - 1) + "):lt(" + pagesize + ")").show();
                    $("#imgdiv img").not($("#imgdiv img:gt(" + ((pageindex - 1) * pagesize - 1) + "):lt(" + pagesize + ")")).hide();
                }
                if (pageindex == 1) {
                    $("#imgdiv img:lt(" + pagesize + ")").show();
                    $("#imgdiv img").not($("#imgdiv img:lt(" + pagesize + ")")).hide();
                }
            }
        }
        function next() {
            var p = $("#imgdiv img").length / pagesize;

            var pagecount = parseInt(Math.ceil(p));

            if (pageindex + 1 > pagecount) {
                pageindex = pagecount;
            } else {
                pageindex++;
            }
            $("#imgdiv img:gt(" + ((pageindex - 1) * pagesize - 1) + "):lt(" + pagesize + ")").show();
            $("#imgdiv img").not($("#imgdiv img:gt(" + ((pageindex - 1) * pagesize - 1) + "):lt(" + pagesize + ")")).hide();
        }
    </script>
 <div>
        <a href="javascript:previous()">上一页</a>
        <div id="imgdiv">
            <img src="/images/001.jpg" alt="第一页的第一张"/>
            <img src="/images/002.jpg" />
            <img src="/images/003.jpg" />
            <img src="/images/004.jpg" />
            <img src="/images/005.jpg" /> 
        </div>
        <a href="javascript:next()">下一页</a>
    </div>