迷上jQuery,相對于原生JavaScript,它是如此的美妙.也因此,促使我更加的努力的研習原生JavaScript.分享一個控制左右滾動及自動滾動的樣例。封裝了兩種模式: 點擊滾動版本DEMO自動滾動版本DEMO,源碼中有詳細注釋.

思路:

　　點擊滾動模式下,是為點擊(向前/向后/數字)添加click事件,通過控制展示區塊left值實現切換.

　　1.向前(左):當在第一個版面時,滾動到最后一個頁面,否則,累加left值,向前滾動;
　　2.向后(右):當在最后一個版面時,滾動到第一個頁面,否則,累減left值,向后滾動;
 　　3.數字點擊:利用index(…)獲取當前點擊在數字列表中的索引值, 然后索引值為倍數為外圍寬度負值.即可達到切換.

核心代碼:

01 //***向前滾動

02 $pre.click(function(){

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

04 if ($cur == 1) { //在第一個版面時,再向前滾動到最后一個版面

05 $showbox.animate({

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

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

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

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'); //為對應的版面數字加上高亮樣式,并移除同級元素的高亮樣式

17 }

18 });

19 //***向后滾動

20 $next.click(function(){

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

22 if ($cur == $pages) { //在最后一個版面時,再向后滾動到第一個版面

23 $showbox.animate({

24 left: 0

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

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

27 }

28 else {

29 $showbox.animate({

30 left: '-=' + $w

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

32 $cur++; //版面數累加

33 }

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

35 }

36 });

37 //***數字點擊事件

38 $num.click(function(){

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

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

41 $showbox.animate({

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

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

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

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

46 }

47 });

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

核心代碼:

01 ......

02 //***調用自動滾動

03 autoSlide();

04 ......

05 //***停止滾動

06 clearFun($showbox);

07 clearFun($pre);

08 clearFun($next);

09 clearFun($num);

10 //***事件劃入時停止自動滾動

11 function clearFun(elem){

12 elem.hover(function(){

13 clearAuto();

14 }, function(){

15 autoSlide();

16 });

17 }

18 //***自動滾動

19 function autoSlide(){

20 $next.trigger('click');

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

22 }

23 //***清除自動滾動

24 function clearAuto(){

25 clearTimeout($autoFun);

26 }