Using the editor: vs code
Mainly used technology: css3 + jQuery
Welcome to add QQ: 1759668379 to discuss together
html: Nothing is written in the html this time. The main thing is to use the for loop to dynamically generate the structure in the js file.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Page turning plugin</title> <link rel="stylesheet" href="fycj.css"> </head> <body> <div class="page"></div> <script src="jquery.js"></script> <script src="fycj.js"></script> <script> $('.page').create({ pageCount:20,//Total number of pages current:5,//current page number backFn:function(p){}//Callback function }) </script> </body> </html>css file:
*{ margin: 0; padding: 0; list-style: none; text-decoration: none; } .page{ width: 500px; height: 200px; margin: 100px auto; } .page a, .page .noPre, .current{ display: inline-block; padding: 0 10px; height: 20px; line-height: 20px; border: 1px solid #ddd; color: #428bca; border-radius: 4px; vertical-align: middle; margin-left: 5px; } .page a:hover{ border:1px solid #428bca; } .page .noPre{ background-color: #ddd; color: #eee; } .page .current{ background-color: #428bca; color:#eee; }js file: see the comments for the content
(function(){ //Entry function function init(dom,arg){ / / Determine whether the incoming page number meets the standard if(arg.current <= arg.pageCount){ fillhtml (dom, arg); bindEvent (dom, arg); }else{ alert('Please enter the correct page number') } } // Dynamically build web content function fillhtml(dom,arg){ //Clear the page layout dom.empty(); //Roughly divided into three parts: previous page, middle page number, next page //previous page //The previous page is divided into two types: clickable and non-clickable if(arg.current > 1){ dom.append('<a class="prePage" href="#">上一页</a>'); }else { dom.remove('.prePage'); dom.append('<span class="noPre">上一页</span>'); } //intermediate page number //The middle page number is divided into 5 page numbers that can be displayed in the middle and ... and the page numbers at both ends //First page if(arg.current != 1 && arg.current > 3){ dom.append('<a class="tcdNum" href="#">1</a>'); } //Determine whether the current page is greater than 3 from the first page, if so, you need to... if(arg.current-3 > 1){ dom.append('<span>...</span>'); } / / Determine the page number that needs to be displayed in the middle var start = arg.current-2; var end = arg.current + 2; for(;start <= end;start++){ //Determine whether the start page is greater than 1 and less than the maximum page number if(start >= 1 && start <= arg.pageCount){ // Determine if the page is selected if(start == arg.current){ dom.append('<span class="current">'+start+'</span>'); } else { dom.append('<a class="tcdNum" href="#">'+start+'</a>'); } } } //backwards... if(arg.current+3 < arg.pageCount){ dom.append('<span>...</span>'); } //the last page if(arg.current != arg.pageCount && arg.current < arg.pageCount-2){ dom.append('<a class="tcdNum" href="#">'+arg.pageCount+'</a>'); } //Next page //The next page is similar to the previous page if(arg.current < arg.pageCount){ dom.append('<a class="nextPage" href="#">下一页</a>'); }else { dom.remove('.prePage'); dom.append('<span class="noPre">下一页</span>') } } //handle click event function bindEvent (dom, arg) { // Divided into click on the previous page, click on the page number and click on the next page //click on the previous page //Get the current page, -1 and then call fillhtml to redraw the page dom.on('click','.prePage',function(){ var cur=parseInt(dom.children('.current').text()); fillhtml(dom,{'current':cur-1,'pageCount':arg.pageCount}); if(typeof arg.backFn=='function'){ arg.backFn(cur-1); } }) //click page number //Get the clicked page number, call fillhtml to redraw the page dom.on('click','.tcdNum',function(){ var cur=parseInt($(this).text()); fillhtml(dom,{'current':cur,'pageCount':arg.pageCount}); if(typeof arg.backFn=='function'){ arg.backFn(cur); } }) //click next page //Get the current page, +1 and then call fillhtml to redraw the page dom.on('click','.nextPage',function(){ var cur=parseInt(dom.children('.current').text()); fillhtml(dom,{'current':cur+1,'pageCount':arg.pageCount}); if(typeof arg.backFn=='function'){ arg.backFn(cur+1); } }) } //Extend jquery wrapper function $.fn.create=function(option){ // // extend function: when calling create, if the parameter option is passed // use the passed parameters, otherwise use the predefined parameters // var arg = extend. extend ( pageCount:10, current:2, backFn:function(){} },option) init(this,arg); } })(jQuery);
Effect picture:
Comments and corrections are welcome.
(over)