看板 Ajax 關於我們 聯絡資訊
這是一個可以把圖片切換左右滑動的原始碼 來源: 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 //因為 .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,表示移到上一張圖片? 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」會是哪個值? 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); }; }; }); 想請教大家我這樣的解釋對嗎?? 新手學習中,請多多指教,謝謝~~!! -- ※ 發信站: 批踢踢實業坊(ptt.cc) ◆ From: 202.39.237.142
danny8376:其實這程式的效果有點怪OWO 09/23 20:00
danny8376:等... 奇妙了 他的預覽正常 我複製的那份倒是效果不對 09/23 20:07
danny8376:原來XDD 他用jQuery 1.4 我用1.9 所以出事了XDD 09/23 20:09