Re: [問題] 看不太懂的程式碼

看板Ajax作者jenesis (ゼネシス)時間10年前 (2013/09/23 20:32)推噓1(1推 0噓 18→)

留言19則, 2人參與討論串2/2 (看更多)

※ 引述《Tethys (花芯)》之銘言： : 這是一個可以把圖片切換左右滑動的原始碼 : 來源： : http://www.veryhuo.com/a/view/43357.html : $(function(){ 下面這個區塊只有在一開始會執行，也就是初始化的動作 ============================================================== : var i=0; //指定變數「i」的初始值為零 : var li = $(".lxfscroll li"); //指定li是選擇html中class="lxfscroll"的li元素 : var n=li.length-1; //指定變數「n」等於li的數量-1 (假設li有六個就是五) : var speed = 300; //指定速度為300 : li.not(":first").css({left:"400px"}); // 如果不是li中的第一項，指定往右滑動400px : li.eq(n).css({left:"-400px"}); //針對在li中的「n」項(假設是5) 往左滑400px 上面兩行，應該不能說是滑動，因為他只是單純改CSS，是直接把那個物件放在那個位置並沒有做任何補間動畫。 : //因為 .eq是從零開始，所以其實是指第六項 : //所以滑到第六張圖的時候就往左滑400px 你上面說的這句，判斷他的邏輯不存在於上面的程式碼中，是在之後的部分。 ============================================================== 這邊是按下"下一個"的時候會執行的東西 ============================================================== : lxfNext=function (){ //指定一個功能"lxfNext" : if (!li.is(":animated")) { //"如果li正在動畫中"是錯的即為true，就執行下面 : (這裡的驚嘆號是表示not？) : if (i>=n){i=0;li.eq(n).animate({left:"-400px"},speed); : //如果「i」大於或等於「n」，執行{將「i」歸零，指定li中的第「n」項產生動畫 : 往右滑400px} : //然後後面{執行}的也就是指滑到第六張圖片就會往左滑400px，表示移到上一張圖片？應該不能說是往左滑400px，他的意思是叫他滑到left = -400px的位置如果要說"往左滑 400px"應該要寫作"-=400px"才對，下面也一樣 : li.eq(i).animate({left:"0px"},speed); : //li中的第0項（就是第一張圖片）產生動畫：往最初位置移動 : else{i++;li.eq(i-1).animate({left:"-400px"},speed); : //否則「i」累加數值；指定「i-1」之項目產生動畫：往左滑400px : //意指「i（零）會持續加一」直到大於或等於「n（五）」 : //li中的第（i-1項，可能是1-1,2-1..）會產生動畫往左滑400px : //表示滑到第五張之前都是往左滑的 : li.eq(i).animate({left:"0px"},speed);}; : // li中的第「i」項（原本是零）產生動畫：返回原位 : // 這裡不太懂>"< 「i」會是哪個值？因為i=0只被初始化一次，然而按鈕不只被執行一次，所以每次按下按鈕都會變更他的值 : li.not("eq(i)").css({left:"400px"}); : // li若不是第「i」值時執行動畫：往右滑400px : $("i").text(i+1); : }else{}; : }; ========================================================================== 這邊是按下"上一個"的時候會執行的東西 ========================================================================== : lxfLast=function (){ : if (!li.is(":animated")) { : if (i<=0){i=n;li.eq(0).animate({left:"400px"},speed); : li.eq(n).animate({left:"0px"},speed); : }else{i--;li.eq(i+1).animate({left:"400px"},speed); : li.eq(i).animate({left:"0px"},speed);} : li.not("eq(i)").css({left:"-400px"}); : $("i").text(i+1); : }; : }; : }); : 想請教大家我這樣的解釋對嗎？？ : 新手學習中，請多多指教，謝謝～～！！ ========================================================================== 這個範例只是把不想顯示的東西直接放到你看不到的地方而已等到要用的時候再讓他滑進來，假設有六張圖一開始應該是 1 23456(都在同一個位置上) 接著每按一次就把圖片滑到中間，再按一次就把他滑到左邊看不到的地方這樣在看不到的區域裡面就都是疊在一起的了。我想原po要注意程式碼中各個片段的邏輯性，以及各個片段的執行時機為何這樣才有辦法看得懂~ -- ※ 發信站: 批踢踢實業坊(ptt.cc) ◆ From: 180.176.140.42

→