快捷導(dǎo)航

基于jQuery的可以控制左右滾動及自動滾動效果的代碼

更新時間：2010年07月25日 23:38:44 作者：

迷上jQuery,相對于原生JavaScript,它是如此的美妙.也因此,促使我更加的努力的研習原生JavaScript.

分享一個控制左右滾動及自動滾動的樣例, 昨晚花了兩個多小時, 忍受著悍蚊的叮咬, 汗水的侵襲, 一行行的敲出來的血汗代碼. 哈哈.
封裝了兩種模式: 點擊滾動版本DEMO 自動滾動版本DEMO,源碼中有詳細注釋.
思路:
點擊滾動模式下,是為點擊(向前/向后/數(shù)字)添加click事件,通過控制展示區(qū)塊left值實現(xiàn)切換.
1.向前(左):當在第一個版面時,滾動到最后一個頁面,否則,累加left值,向前滾動;
2.向后(右):當在最后一個版面時,滾動到第一個頁面,否則,累減left值,向后滾動;
3.數(shù)字點擊:利用index(…)獲取當前點擊在數(shù)字列表中的索引值, 然后索引值為倍數(shù)為外圍寬度負值.即可達到切換.
核心代碼:

復(fù)制代碼代碼如下:

 
//@Mr.Think***向前滾動 
$pre.click(function(){ 
if (!$showbox.is(':animated')) { //判斷展示區(qū)是否動畫 
if ($cur == 1) { //在第一個版面時,再向前滾動到最后一個版面 
$showbox.animate({ 
left: '-=' + $w * ($pages - 1) 
}, 500); //改變left值,切換顯示版面,500(ms)為滾動時間,下同 
$cur = $pages; //初始化版面為最后一個版面 
} 
else { 
$showbox.animate({ 
left: '+=' + $w 
}, 500); //改變left值,切換顯示版面 
$cur--; //版面累減 
} 
$num.eq($cur - 1).addClass('numcur').siblings().removeClass('numcur'); //為對應(yīng)的版面數(shù)字加上高亮樣式,并移除同級元素的高亮樣式 
} 
}); 
//@Mr.Think***向后滾動 
$next.click(function(){ 
if (!$showbox.is(':animated')) { //判斷展示區(qū)是否動畫 
if ($cur == $pages) { //在最后一個版面時,再向后滾動到第一個版面 
$showbox.animate({ 
left: 0 
}, 500); //改變left值,切換顯示版面,500(ms)為滾動時間,下同 
$cur = 1; //初始化版面為第一個版面 
} 
else { 
$showbox.animate({ 
left: '-=' + $w 
}, 500);//改變left值,切換顯示版面 
$cur++; //版面數(shù)累加 
} 
$num.eq($cur - 1).addClass('numcur').siblings().removeClass('numcur'); //為對應(yīng)的版面數(shù)字加上高亮樣式,并移除同級元素的高亮樣式 
} 
}); 
//@Mr.Think***數(shù)字點擊事件 
$num.click(function(){ 
if (!$showbox.is(':animated')) { //判斷展示區(qū)是否動畫 
var $index = $num.index(this); //索引出當前點擊在列表中的位置值 
$showbox.animate({ 
left: '-' + ($w * $index) 
}, 500); //改變left值,切換顯示版面,500(ms)為滾動時間 
$cur = $index + 1; //初始化版面值,這一句可避免當滾動到第三版時,點擊向后按鈕,出面空白版.index()取值是從0開始的,故加1 
$(this).addClass('numcur').siblings().removeClass('numcur'); //為當前點擊加上高亮樣式,并移除同級元素的高亮樣式 
} 
}); 

自動滾動模式是基于點擊滾動模式加強的,無非是添加了自動滾動事件,以及當鼠標劃上時清除動畫事件.
這里要說明一點.DEMO演示中,為向前/向后/數(shù)字/區(qū)域都添加了當鼠標劃過時都添加了清除動畫事件.但是,如果你的頁面中,這幾個需要添加清除動畫事件的都在同一個區(qū)域內(nèi),完全可以用trigger(…)模擬實現(xiàn)自動滾動.
還有一點,自動滾動中是用setTimeout(“fun”,interval)實現(xiàn),而不用setInterval(“fun”,interval)實現(xiàn). 原因在于,setInterval是在間隔時間后重復(fù)執(zhí)行傳入的函數(shù),而setTimeout只在間隔時間后執(zhí)行一次函數(shù)傳入函數(shù),這樣即可避免第二次鼠標劃入停止動畫區(qū)域時不能清除動畫.
核心代碼:

復(fù)制代碼代碼如下:

 
...... 
//@Mr.Think***調(diào)用自動滾動 
autoSlide(); 
...... 
//@Mr.Think***停止?jié)L動 
clearFun($showbox); 
clearFun($pre); 
clearFun($next); 
clearFun($num); 
//@Mr.Think***事件劃入時停止自動滾動 
function clearFun(elem){ 
elem.hover(function(){ 
clearAuto(); 
}, function(){ 
autoSlide(); 
}); 
} 
//@Mr.Think***自動滾動 
function autoSlide(){ 
$next.trigger('click'); 
$autoFun = setTimeout(autoSlide, 3000);//此處不可使用setInterval,setInterval是重復(fù)執(zhí)行傳入函數(shù),這會引起第二次劃入時停止失效 
} 
//@Mr.Think***清除自動滾動 
function clearAuto(){ 
clearTimeout($autoFun); 
} 