作者Tethys (花芯)
看板Ajax
标题[问题] 看不太懂的程式码
时间Mon Sep 23 18:51:14 2013
这是一个可以把图片切换左右滑动的原始码
来源:
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
1F:→ danny8376:其实这程式的效果有点怪OWO 09/23 20:00
2F:→ danny8376:等... 奇妙了 他的预览正常 我复制的那份倒是效果不对 09/23 20:07
3F:→ danny8376:原来XDD 他用jQuery 1.4 我用1.9 所以出事了XDD 09/23 20:09