响应式广告位

易优文章内容自动分页JS

$(document).ready(function(){ var show_per_page = 5;  var number_of_items = $(\’#content\’).children().size(); var number_of_pages = Math.ceil(number_of_items/show_per_page); $(\’#current_page\’).val(0); $(\’#show_per_page\’).val(show_per_page); var navigation_html = \'<a class=\”previous_link\” href=\”javascript:previous();\” rel=\”external nofollow\” >Prev</a>\’; var current_link = 0; while(number_of_pages > current_link){ navigation_html += \'<a class=\”page_link\” href=\”javascript:go_to_page(\’ + current_link +\’)\” rel=\”external nofollow\”  longdesc=\”\’ + current_link +\’\”>\’+ (current_link + 1) +\'</a>\’; current_link++; } navigation_html += \'<a class=\”next_link\” href=\”javascript:next();\” rel=\”external nofollow\” >Next</a>\’; $(\’#page_navigation\’).html(navigation_html); $(\’#page_navigation .page_link:first\’).addClass(\’active_page\’); $(\’#content\’).children().css(\’display\’, \’none\’); //and show the first n (show_per_page) elements $(\’#content\’).children().slice(0, show_per_page).css(\’display\’, \’block\’); }); function previous(){ new_page = parseInt($(\’#current_page\’).val()) – 1; if($(\’.active_page\’).prev(\’.page_link\’).length==true){ go_to_page(new_page); } } function next(){ new_page = parseInt($(\’#current_page\’).val()) + 1; if($(\’.active_page\’).next(\’.page_link\’).length==true){ go_to_page(new_page); } } function go_to_page(page_num){ var show_per_page = parseInt($(\’#show_per_page\’).val()); start_from = page_num * show_per_page; end_on = start_from + show_per_page; $(\’#content\’).children().css(\’display\’, \’none\’).slice(start_from, end_on).css(\’display\’, \’block\’); $(\’.page_link[longdesc=\’ + page_num +\’]\’).addClass(\’active_page\’).siblings(\’.active_page\’).removeClass(\’active_page\’); $(\’#current_page\’).val(page_num); }
文章代码:
<input type=’hidden’ id=’current_page’ />
<input type=’hidden’ id=’show_per_page’ />
<div id=’content’>
<p></p>
<p></p>
<p></p>
<p></p>
5个P为一页
</div>
<div id=’page_navigation’></div>

© 版权声明
THE END
喜欢就支持一下吧
点赞458 分享
评论 抢沙发

请登录后发表评论

    暂无评论内容