JQuery輪播就是在網(wǎng)頁中實(shí)現(xiàn)圖片、文字等內(nèi)容的自動滾動或手動左右滑動的效果，非常適用于網(wǎng)站的幻燈片、廣告、推薦等區(qū)域。在JQuery輪播插件的實(shí)現(xiàn)過程中，左右箭頭是不可或缺的，它們可以讓用戶自由控制輪播方向，增強(qiáng)用戶體驗(yàn)。下面就是一段關(guān)于JQuery輪播左右箭頭代碼的示范：

$(document).ready(function(){
var speed = 800; // 設(shè)置圖片滾動的速度
var count = $('#container .pic li').length; // 獲取圖片的數(shù)量
var width = $('#container .pic li').width(); // 獲取單個(gè)圖片的寬度
var timer; // 設(shè)置自動播放的計(jì)時(shí)器
var curIndex = 0; // 當(dāng)前圖片的索引
// 鼠標(biāo)移動到輪播區(qū)域時(shí)，停止自動播放
$('#container').hover(function(){
clearInterval(timer);
}, function(){
timer = setInterval(function(){
curIndex++;
if(curIndex == count) curIndex = 0;
move(curIndex);
}, 3000);
});
//給左右箭頭綁定點(diǎn)擊事件，實(shí)現(xiàn)手動控制輪播
$('#container .btn_left').click(function(){
curIndex--;
if(curIndex < 0) curIndex = count - 1;
move(curIndex);
});
$('#container .btn_right').click(function(){
curIndex++;
if(curIndex == count) curIndex = 0;
move(curIndex);
});
// 移動圖片的動作
function move(index){
$('#container .pic').stop().animate({
left: -index * width
}, speed);
// 圖片下面的圓點(diǎn)跟隨變化
$('#container .btn li').removeClass('on').eq(index).addClass('on');
}
// 啟動自動播放
timer = setInterval(function(){
curIndex++;
if(curIndex == count) curIndex = 0;
move(curIndex);
}, 3000);
});

以上代碼主要實(shí)現(xiàn)了輪播圖的自動播放、左右箭頭的手動控制和圓點(diǎn)隨之變化的效果。通過緩沖動畫插件animate()，可以實(shí)現(xiàn)更加平滑的滾動效果。