使用jQuery實(shí)現(xiàn)控制左右滾動(dòng)及自動(dòng)滾動(dòng)效果

迷上jQuery,相對(duì)于原生JavaScript,它是如此的美妙.也因此,促使我更加的努力的研習(xí)原生JavaScript.
分享一個(gè)控制左右滾動(dòng)及自動(dòng)滾動(dòng)的樣例, 昨晚花了兩個(gè)多小時(shí), 忍受著悍蚊的叮咬, 汗水的侵襲, 一行行的敲出來(lái)的血汗代碼. 哈哈.
封裝了兩種模式: 點(diǎn)擊滾動(dòng)版本DEMO     自動(dòng)滾動(dòng)版本DEMO,源碼中有詳細(xì)注釋.
思路:
點(diǎn)擊滾動(dòng)模式下,是為點(diǎn)擊(向前/向后/數(shù)字)添加click事件,通過(guò)控制展示區(qū)塊left值實(shí)現(xiàn)切換.
1.向前(左):當(dāng)在第一個(gè)版面時(shí),滾動(dòng)到最后一個(gè)頁(yè)面,否則,累加left值,向前滾動(dòng);
2.向后(右):當(dāng)在最后一個(gè)版面時(shí),滾動(dòng)到第一個(gè)頁(yè)面,否則,累減left值,向后滾動(dòng);
3.數(shù)字點(diǎn)擊:利用index(…)獲取當(dāng)前點(diǎn)擊在數(shù)字列表中的索引值, 然后索引值為倍數(shù)為外圍寬度負(fù)值.即可達(dá)到切換.
核心代碼:

01 //***向前滾動(dòng)

02 $pre.click(function(){

03 if (!$showbox.is(':animated')) { //判斷展示區(qū)是否動(dòng)畫

04 if ($cur == 1) { //在第一個(gè)版面時(shí),再向前滾動(dòng)到最后一個(gè)版面

05 $showbox.animate({

06 left: '-=' + $w * ($pages - 1)

07 }, 500); //改變left值,切換顯示版面,500(ms)為滾動(dòng)時(shí)間,下同

08 $cur = $pages; //初始化版面為最后一個(gè)版面

09 }

10 else {

11 $showbox.animate({

12 left: '+=' + $w

13 }, 500); //改變left值,切換顯示版面

14 $cur--; //版面累減

15 }

16 $num.eq($cur - 1).addClass('numcur').siblings().removeClass('numcur'); //為對(duì)應(yīng)的版面數(shù)字加上高亮樣式,并移除同級(jí)元素的高亮樣式

17 }

18 });

19 //***向后滾動(dòng)

20 $next.click(function(){

21 if (!$showbox.is(':animated')) { //判斷展示區(qū)是否動(dòng)畫

22 if ($cur == $pages) { //在最后一個(gè)版面時(shí),再向后滾動(dòng)到第一個(gè)版面

23 $showbox.animate({

24 left: 0

25 }, 500); //改變left值,切換顯示版面,500(ms)為滾動(dòng)時(shí)間,下同

26 $cur = 1; //初始化版面為第一個(gè)版面

27 }

28 else {

29 $showbox.animate({

30 left: '-=' + $w

31 }, 500);//改變left值,切換顯示版面

32 $cur++; //版面數(shù)累加

33 }

34 $num.eq($cur - 1).addClass('numcur').siblings().removeClass('numcur'); //為對(duì)應(yīng)的版面數(shù)字加上高亮樣式,并移除同級(jí)元素的高亮樣式

35 }

36 });

37 //***數(shù)字點(diǎn)擊事件

38 $num.click(function(){

39 if (!$showbox.is(':animated')) { //判斷展示區(qū)是否動(dòng)畫

40 var $index = $num.index(this); //索引出當(dāng)前點(diǎn)擊在列表中的位置值

41 $showbox.animate({

42 left: '-' + ($w * $index)

43 }, 500); //改變left值,切換顯示版面,500(ms)為滾動(dòng)時(shí)間

44 $cur = $index + 1; //初始化版面值,這一句可避免當(dāng)滾動(dòng)到第三版時(shí),點(diǎn)擊向后按鈕,出面空白版.index()取值是從0開始的,故加1

45 $(this).addClass('numcur').siblings().removeClass('numcur'); //為當(dāng)前點(diǎn)擊加上高亮樣式,并移除同級(jí)元素的高亮樣式

46 }

47 });

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

01 ......

02 //***調(diào)用自動(dòng)滾動(dòng)

03 autoSlide();

04 ......

05 //***停止?jié)L動(dòng)

06 clearFun($showbox);

07 clearFun($pre);

08 clearFun($next);

09 clearFun($num);

10 //***事件劃入時(shí)停止自動(dòng)滾動(dòng)

11 function clearFun(elem){

12 elem.hover(function(){

13 clearAuto();

14 }, function(){

15 autoSlide();

16 });

17 }

18 //***自動(dòng)滾動(dòng)

19 function autoSlide(){

20 $next.trigger('click');

21 $autoFun = setTimeout(autoSlide, 3000);//此處不可使用setInterval,setInterval是重復(fù)執(zhí)行傳入函數(shù),這會(huì)引起第二次劃入時(shí)停止失效

22 }

23 //***清除自動(dòng)滾動(dòng)

24 function clearAuto(){

25 clearTimeout($autoFun);

26 }

更詳細(xì)代碼分析,請(qǐng)查看源碼,寫有詳細(xì)的注釋.