jquery是一種被廣泛使用的JavaScript庫(kù)。它可以使JavaScript編寫(xiě)的頁(yè)面效果更加生動(dòng)和美觀。其中，jquery div左右切換是一種非常常見(jiàn)的頁(yè)面效果。

$(function(){
var currentIndex = 0;  // 當(dāng)前切換到的圖片下標(biāo)
var imgNum = $('.img-wrapper img').length;  // 圖片的總數(shù)
var imgWidth = $('.img-wrapper img').eq(0).width();  // 單個(gè)圖片的寬度
// 下一張圖片
function showNextImg(){
if(currentIndex == imgNum - 1){
currentIndex = 0;
$('.img-wrapper').css('left', 0);
}else{
currentIndex++;
}
$('.img-wrapper').animate({left: -imgWidth*currentIndex}, 500);
}
// 上一張圖片
function showPrevImg(){
if(currentIndex == 0){
currentIndex = imgNum - 1;
$('.img-wrapper').css('left', -imgWidth*(imgNum-1));
}else{
currentIndex--;
}
$('.img-wrapper').animate({left: -imgWidth*currentIndex}, 500);
}
// 綁定左右切換按鈕的點(diǎn)擊事件
$('.prev').click(function(){
showPrevImg();
});
$('.next').click(function(){
showNextImg();
});
});

以上的代碼為jquery實(shí)現(xiàn)div左右切換的示例。其中img-wrapper是容納圖片的div元素，imgNum為圖片的總數(shù)，currentIndex為當(dāng)前展示圖片的下標(biāo)，imgWidth為單個(gè)圖片的寬度。showNextImg()和showPrevImg()是分別用于切換到下一張和上一張圖片的函數(shù)。

在綁定左右切換按鈕的點(diǎn)擊事件時(shí)，我們只需要調(diào)用相應(yīng)的函數(shù)即可實(shí)現(xiàn)圖片的左右切換效果。這樣可以使得頁(yè)面更加直觀，提高用戶(hù)體驗(yàn)，同時(shí)也是一種美化頁(yè)面的手段。