JQuery輪播圖是一種非常常見的網(wǎng)頁特效，能夠給用戶視覺上的享受。本文將介紹如何使用jQuery輪播設(shè)置鼠標(biāo)劃動效果。

$(document).ready(function(){
var imagesCount = $('ul li').length; //圖片數(shù)量
var imageWidth = $('ul li').width(); //圖片寬度
var sliderUlWidth = imagesCount * imageWidth; //輪播圖片總寬度
$('ul.slider').css('width', sliderUlWidth);
//鼠標(biāo)劃上停止輪播
$('ul.slider').hover(function(){ 
clearInterval(interval); 
}, function(){ 
interval = setInterval(moveRight, 3000); 
});
//鼠標(biāo)左劃顯示下一張圖片
$('a.control_next').click(function () {
moveRight();
});
//鼠標(biāo)右劃顯示上一張圖片
$('a.control_prev').click(function () {
moveLeft();
});
});
function moveRight() {
var current = $('ul.slider').position().left;
var lastImage = $('ul.slider li').last().position().left + $('ul.slider li').last().width();
if (current > -lastImage) {
$('ul.slider').animate({
left: '-=' + imageWidth
}, 600);
} else {
$('ul.slider').animate({
left: '0'
}, 600);
}
}
function moveLeft() {
var current = $('ul.slider').position().left;
var firstImage = $('ul.slider li').first().position().left;
if (current < -imageWidth) {
$('ul.slider').animate({
left: '+=' + imageWidth
}, 600);
} else {
$('ul.slider').animate({
left: '-' + (imagesCount - 1) * imageWidth
}, 600);
}
}

上面的代碼中使用了hover動作、click響應(yīng)事件，通過計(jì)算偏移量，實(shí)現(xiàn)每次滑動到圖片邊緣時折返輪播。鼠標(biāo)劃上時停止輪播，離開時恢復(fù)輪播。

通過以上設(shè)置，我們可以輕松地為自己的網(wǎng)站添加帶鼠標(biāo)劃動效果的JQuery輪播圖，讓網(wǎng)頁看起來更加生動有趣，提升用戶體驗(yàn)。