题目要求：
题解：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width',' initial-scale=1.0"> <title>面试题</title> <script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script> </head> <body> <div id="bg1"></div> <div id="bg2"></div> <script> // 插件封装 (function ($) { $.fn.myInitData = function (options) { // 默认参数 var dft = { initNum: 2, //初始化展示条数 showMaxnum: 6, //画面最多展示条数 changeNum: 2, //删除和增加条数 data: [], showStart: 0, //当前展示的起始位置 showEnd: 0 //当前展示的最后一条 }; // 修改默认参数为自定义参数 for (var i in options) { dft[i] = options[i]; } var dom = ''; //初始化dom if (dft.data.length <= 0) { // 数据为空 dom += '<p>暂无数据！</p>'; $(this).html(dom); } else if (dft.data.length <= dft.initNum) { // 数据量小于初始展示条数，无需上下页按钮 dom += '<div><ul>' for (var i = 0; i < dft.data.length; i++) { dom += '<li>' + dft.data[i] + '</li>'; } dom += '</ul></div>'; $(this).html(dom); } else { // 数据量大于初始展示条数，需要上下页按钮 dom += '<div><ul class="con">' for (var i = 0; i < dft.initNum; i++) { dom += '<li>' + dft.data[i] + '</li>'; } dom += '</ul>'; dom += '<p class="btnBox"><button class="next">下一页</button></p></div>'; $(this).html(dom); dft.showStart = 0; dft.showEnd = dft.initNum; var that = this; // 翻页事件 $(this).find('.btnBox').delegate('button','click', function () { if ($(this).hasClass('pre')) { // 上一页 if($(that).find('.next').length==0){ $(that).find('.btnBox').append('<button class="next">下一页</button>'); } if (dft.showEnd - dft.changeNum <= dft.showMaxnum) { dft.showEnd = dft.showMaxnum; dft.showStart = 0; $(that).find('.pre').remove(); } else { dft.showEnd -= dft.changeNum; dft.showStart -= dft.changeNum; } } else if ($(this).hasClass('next')) { // 下一页 if ((dft.showEnd + dft.changeNum) >= dft.data.length ) { dft.showEnd = dft.data.length; $(that).find('.next').remove(); } else { dft.showEnd = dft.showEnd + dft.changeNum; } if (dft.showEnd - dft.showMaxnum > 0) { dft.showStart = dft.showEnd - dft.showMaxnum; if ($(that).find('.pre').length == 0) { $(that).find('.btnBox').prepend('<button class="pre">上一页</button>'); } } else { dft.showStart = 0; } } console.log(dft.showStart+' '+dft.showEnd); var dom = ''; for (var i = dft.showStart; i < dft.showEnd; i++) { dom += '<li>' + dft.data[i] + '</li>'; } $(that).find('ul.con').html(dom); }) } } })(jQuery); // var data = ["1、11111111111111", "2、222222222222222", "3、333333333333", "4、444444444444444", "5、55555555555555", "6、666666666666666", "7、7777777777777777", "8、8888888888888", "9、9999999999999", "10、10101010101010110", "11、1111111111111111", "12、1212121212121212", "13、13131313131", "14、1414141414144", "15、15151515151515", "16、1616161616161616", "17、1717171717", "18、1818181818", "19、1919191991919", "20、202020202020", "21、2121212121", "22、22222222222", "23、23232322323323", "24、2424242424", "25、25252525252525", "26、262626262626262626", "27、2727272727", "28、2828282828", "29、29292929292929", "30、30303030303030303",'31、3131313131313' ]; var option = { data }; $('#bg1').myInitData(option); // $('#bg2').myInitData(option); </script> </body> </html>