jQuery輪播是一種常見的網頁圖片展示方式，通過一定的動畫效果，將多張圖片自動或手動的進行切換展示，使得頁面效果更加生動和有趣。

在實現jQuery輪播的過程中，需要使用到jQuery庫中的一些常用API，如選擇器、事件處理、動畫效果等。下面是一個簡單的輪播例子：

$("document").ready(function(){
var idx = 0;
var len = $("img").length; //獲取圖片數量
//自動輪播
autoSlide();
function autoSlide(){
idx++;
if(idx >= len){
idx = 0;
}
$("img").eq(idx).fadeIn(500).siblings("img").fadeOut(500);
setTimeout(autoSlide, 3000);
}
//點擊切換
$("button").click(function(){
if($(this).hasClass("prev")){
idx--;
if(idx < 0){
idx = len - 1;
}
}else{
idx++;
if(idx >= len){
idx = 0;
}
}
$("img").eq(idx).fadeIn(500).siblings("img").fadeOut(500);
});
});

代碼中使用了定時器和事件處理來實現自動輪播和手動切換，同時使用了jQuery的動畫效果實現了圖片的淡入淡出效果。

總頁數的計算公式為 Math.ceil(len / pageSize)，其中len為所有圖片的數量，pageSize為每頁圖片數量。

因此，如果我們需要在輪播中添加總頁數的信息，可以在輪播初始化時計算出總頁數并更新頁面顯示，如下示例：

$("document").ready(function(){
var idx = 0;
var pageSize = 3; //每頁圖片數量
var len = $("img").length; //獲取圖片數量
var pageCount = Math.ceil(len / pageSize); //計算總頁數
$("#pageInfo").text("共" + pageCount + "頁"); //更新頁面顯示
//自動輪播
autoSlide();
function autoSlide(){
idx++;
if(idx >= len){
idx = 0;
}
$("img").eq(idx).fadeIn(500).siblings("img").fadeOut(500);
setTimeout(autoSlide, 3000);
}
//點擊切換
$("button").click(function(){
if($(this).hasClass("prev")){
idx -= pageSize; //往前一頁
if(idx < 0){
idx = len - pageSize;
}
}else{
idx += pageSize; //往后一頁
if(idx >= len){
idx = 0;
}
}
$("img").eq(idx).fadeIn(500).siblings("img").fadeOut(500);
});
});

代碼中添加了pageSize和pageCount變量，通過Math.ceil()方法計算總頁數，并在頁面中顯示。同時，修改了點擊切換的邏輯，使得點擊按鈕可以直接切換到相應的頁數。

以上就是jQuery輪播和計算總頁數的實現方法，通過實踐我們可以更加深入的理解jQuery庫的API使用方式和動畫效果的實現原理。