Jquery是一種流行的JavaScript庫，它能夠方便地操作DOM元素、處理事件、執行動畫以及Ajax交互。在眾多的應用中，使用Jquery實現圖片分頁是一種非常常用的技巧。下面我們來學習一下如何使用Jquery實現一個基本的div圖片分頁

<div id="pagecontent">
<div class="page"><img src="1.jpg"></div>
<div class="page"><img src="2.jpg"></div>
<div class="page"><img src="3.jpg"></div>
<div class="page"><img src="4.jpg"></div>
<div class="page"><img src="5.jpg"></div>
</div>
<div id="pagination"></div>
<script>
$(document).ready(function(){
var pageSize = 3; // 每頁顯示數量
var pageCount = Math.ceil($(".page").length / pageSize); // 計算總頁數
for (var i = 1; i<= pageCount; i++) { // 生成分頁標簽
$("#pagination").append("<a href='#' class='pageBtn' data-page='" + i + "'>" + i + "</a>");
}
$(".page").hide(); // 隱藏所有圖片
$(".page").slice(0, pageSize).show(); // 顯示第一頁的圖片
$("#pagination a:first-child").addClass("active"); // 第一頁被選中
$("#pagination").on("click", ".pageBtn", function(){ // 分頁按鈕點擊事件
var page = $(this).data("page");
var start = (page - 1) * pageSize;
var end = start + pageSize;
$(".page").hide();
$(".page").slice(start, end).fadeIn();
$("#pagination a").removeClass("active");
$(this).addClass("active");
});
});
</script>

以上代碼中，我們首先定義了每頁顯示的數量pageSize，然后使用Math.ceil()函數計算出總頁數pageCount。接下來使用循環語句生成分頁標簽，使用hide()函數隱藏所有圖片，使用slice()函數顯示第一頁的圖片，使用addClass()函數使第一頁對應的分頁標簽被選中。最后使用on()函數綁定分頁按鈕的點擊事件，用fadeIn()函數來呈現當前頁的圖片，使用removeClass()函數取消先前選定的標簽并將active類添加到當前選定的分頁標簽上。