JSFiddle - React, Tailwind, and code Playground

by jquery2005

HTML

<div>
    <a href="javascript:previous()">上一页</a>
    <div id="imgdiv">
        <img src="http://img4.cache.netease.com/photo/0001/2012-05-15/100x75_81IJQS2N00AN0001.jpg" alt="第一页的第一张"/>
        <img src="http://img4.cache.netease.com/photo/0001/2012-05-15/100x75_81HSLOU200AN0001.jpg" />
        <img src="http://img4.cache.netease.com/photo/0001/2012-05-14/100x75_81G4L1GT00AN0001.jpg" />
        <img src="http://img3.cache.netease.com/photo/0001/2012-05-14/100x75_81FTESMU00AN0001.jpg" />
        <img src="http://img3.cache.netease.com/photo/0001/2012-05-14/100x75_81FPT95I00AN0001.jpg" />
    </div>
    <a href="javascript:next()">下一页</a>
</div>

JavaScript

//<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>