jQuery是一個強大的JavaScript庫，通過它我們可以簡化網頁開發中的許多復雜操作。其中，圖片翻頁是許多網站中必不可少的功能，下面我們就通過jQuery來實現它。

// HTML代碼
<div id="image-container">
<img src="image1.jpg" alt="Image 1">
</div>
<button id="prev-btn">Prev</button>
<button id="next-btn">Next</button>
// CSS代碼
#image-container {
width: 500px;
height: 300px;
overflow: hidden;
position: relative;
}
#image-container img {
position: absolute;
top: 0;
left: 0;
width: 500px;
height: 300px;
}
#prev-btn, #next-btn {
position: absolute;
top: 50%;
transform: translateY(-50%);
padding: 10px;
font-size: 20px;
background-color: #fff;
border: 2px solid #222;
color: #222;
cursor: pointer;
}
#prev-btn {
left: 20px;
}
#next-btn {
right: 20px;
}
// JavaScript代碼
$(document).ready(function() {
var currentIndex = 0;
var images = ["image1.jpg", "image2.jpg", "image3.jpg", "image4.jpg"]; // 圖片數組
function changeImage() {
$("#image-container img").attr("src", images[currentIndex]);
}
$("#prev-btn").on("click", function() {
currentIndex--;
if (currentIndex< 0) {
currentIndex = images.length - 1;
}
changeImage();
});
$("#next-btn").on("click", function() {
currentIndex++;
if (currentIndex >= images.length) {
currentIndex = 0;
}
changeImage();
});
});

以上就是使用jQuery實現圖片翻頁的全部代碼。通過使用jQuery庫提供的attr方法，我們可以動態的改變圖片的src屬性，從而實現圖片翻頁的效果。在代碼中，我們還使用了定時器等其他函數，使得圖片的切換更流暢、自然。使用jQuery開發圖片翻頁功能，不僅可以提高代碼的復用度，還能大大簡化開發過程，為用戶提供更好的瀏覽體驗。