分享一個控制左右滾動及自動滾動的樣例, 昨晚花了兩個多小時, 忍受著悍蚊的叮咬, 汗水的侵襲, 一行行的敲出來的血汗代碼. 哈哈.
封裝了兩種模式: 點(diǎn)擊滾動版本DEMO 自動滾動版本DEMO,源碼中有詳細(xì)注釋.
思路:
點(diǎn)擊滾動模式下,是為點(diǎn)擊(向前/向后/數(shù)字)添加click事件,通過控制展示區(qū)塊left值實(shí)現(xiàn)切換.
1.向前(左):當(dāng)在第一個版面時,滾動到最后一個頁面,否則,累加left值,向前滾動;
2.向后(右):當(dāng)在最后一個版面時,滾動到第一個頁面,否則,累減left值,向后滾動;
3.數(shù)字點(diǎn)擊:利用index(…)獲取當(dāng)前點(diǎn)擊在數(shù)字列表中的索引值, 然后索引值為倍數(shù)為外圍寬度負(fù)值.即可達(dá)到切換.
核心代碼:
01 //***向前滾動
02 $pre.click(function(){
03 if (!$showbox.is(':animated')) { //判斷展示區(qū)是否動畫
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'); //為對應(yīng)的版面數(shù)字加上高亮樣式,并移除同級元素的高亮樣式
17 }
18 });
19 //***向后滾動
20 $next.click(function(){
21 if (!$showbox.is(':animated')) { //判斷展示區(qū)是否動畫
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++; //版面數(shù)累加
33 }
34 $num.eq($cur - 1).addClass('numcur').siblings().removeClass('numcur'); //為對應(yīng)的版面數(shù)字加上高亮樣式,并移除同級元素的高亮樣式
35 }
36 });
37 //***數(shù)字點(diǎn)擊事件
38 $num.click(function(){
39 if (!$showbox.is(':animated')) { //判斷展示區(qū)是否動畫
40 var $index = $num.index(this); //索引出當(dāng)前點(diǎn)擊在列表中的位置值
41 $showbox.animate({
42 left: '-' + ($w * $index)
43 }, 500); //改變left值,切換顯示版面,500(ms)為滾動時間
44 $cur = $index + 1; //初始化版面值,這一句可避免當(dāng)滾動到第三版時,點(diǎn)擊向后按鈕,出面空白版.index()取值是從0開始的,故加1
45 $(this).addClass('numcur').siblings().removeClass('numcur'); //為當(dāng)前點(diǎn)擊加上高亮樣式,并移除同級元素的高亮樣式
46 }
47 });
自動滾動模式是基于點(diǎn)擊滾動模式加強(qiáng)的,無非是添加了自動滾動事件,以及當(dāng)鼠標(biāo)劃上時清除動畫事件.
這里要說明一點(diǎn).DEMO演示中,為向前/向后/數(shù)字/區(qū)域都添加了當(dāng)鼠標(biāo)劃過時都添加了清除動畫事件.但是,如果你的頁面中,這幾個需要添加清除動畫事件的都在同一個區(qū)域內(nèi),完全可以用trigger(…)模擬實(shí)現(xiàn)自動滾動.
還有一點(diǎn),自動滾動中是用setTimeout(“fun”,interval)實(shí)現(xiàn),而不用setInterval(“fun”,interval)實(shí)現(xiàn). 原因在于,setInterval是在間隔時間后重復(fù)執(zhí)行傳入的函數(shù),而setTimeout只在間隔時間后執(zhí)行一次函數(shù)傳入函數(shù),這樣即可避免第二次鼠標(biāo)劃入停止動畫區(qū)域時不能清除動畫.
核心代碼:
01 ......
02 //***調(diào)用自動滾動
03 autoSlide();
04 ......
05 //***停止?jié)L動
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是重復(fù)執(zhí)行傳入函數(shù),這會引起第二次劃入時停止失效
22 }
23 //***清除自動滾動
24 function clearAuto(){
25 clearTimeout($autoFun);
26 }
更詳細(xì)代碼分析,請查看源碼,寫有詳細(xì)的注釋.
下載 
下載 
下載 
下載 
下載 
下載 
下載 
下載 
喜歡 
頂
難過
囧
圍觀
無聊
