※ 引述《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