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