我正在使用JavaScript/Jquery对这个内容滑块进行编码。
请看一下我在JSFiddle上的代码:http://jsfiddle.net/46JfZ/7/
cn = {
hero:function(r,lx,rx,fx,fs,ss,a){
rc=$(r).children(), rcw=rc.width(), rca=rc.size(), rw=rcw*rca, p='px'; $(r).css({'width':rw})
$(lx).click(function(){
n=$(r).position().left-rcw;
switch(fx){
case 'slide':$(r).stop(true,true).animate({left:(n<-rw+rcw?0:n)+p},ss,'easeOutExpo'); break;
case 'fade':$(r).stop(true,true).fadeOut(fs).animate({left:(n<-rw+rcw?0:n)+p},1).fadeIn(fs); break;
}
})
$(rx).click(function(){
n=$(r).position().left+rcw;
switch(fx){
case 'slide':$(r).stop(true,true).animate({left:(n>0?-rw+rcw:n)+p},ss,'easeOutExpo'); break;
case 'fade':$(r).stop(true,true).fadeOut(fs).animate({left:(n>0?-rw+rcw:n)+p},1).fadeIn(fs); break;
}
})
if(a.match('yes')){
$('#hero').append('<div id="indicate"></div>');
$.each(rc, function(){$('#indicate').append('<span></span>');})
function indicate(){
$('#indicate span').removeClass('active');
for(i=1;i<=rca; i++){
o=i-1,
newReelpos = - rcw*o,
q=$(r).position().left;
if(q == newReelpos ){
$('#indicate span:nth-child('+ i +')').addClass('active');
}
}
$(lx).click();
}
setInterval(indicate,3000);
$(lx).parent().hide();
}
}
}
$(function(){
cn.hero('#reel', '#next', '#prev', 'slide', 300, 600, 'yes');
});
我错过了一些东西,因为状态点(右边的蓝色和绿色点)不能正常工作?
如有任何帮助,我们将不胜感激,谢谢
有些事情你做得不好或者是错误的。例如:
function(r,lx,rx,fx,fs,ss,a)
这不是命名参数(或变量)的好方法。这一切意味着什么?几个月后,当你试图修复损坏的东西时,你可能会问自己这个问题。使用描述性参数、变量和函数名称。
您(无意中?)使用了全局变量。例如:
rc=$(r).children(), rcw=rc.width(), rca=rc.size(), // etc.
这些基本上都是全球性的。由于您有一个闭包,您可以在每个闭包上预加一个var
,它们将保留在处理程序和间隔调用的范围内。
你的代码格式有问题,几乎(在我看来)保证了你的代码很难直观地检查问题和效率低下(尤其是与上面和下面的其他观察结果相结合)。将代码隔开。例如:
rc=$(r).children(), rcw=rc.width(), rca=rc.size(), rw=rcw*rca, p='px'; $(r).css({'width':rw})
可能是:
var $r = $(r),
rc = $r.children(),
rcw = rc.width(),
rca = rc.size(),
rw = rcw * rca,
p = 'px';
现在我问你,你认为哪一个更容易阅读?
注意,您也有一些类似的地方,语句没有结尾;
。不要养成这样做的习惯,因为这是一种糟糕的做法,可能会导致以后很难发现的问题。是的,我知道Javascript允许你这样做,但不要上当。
您还应该缓存jQuery调用。因此,发生在同一个闭包中的所有$(r)
可能(我认为在动画的情况下,应该)是:
var $r = $(r); // First, cache
...
$r.stop(true,true).animate() // Then use
这将加快您的代码,因为jQuery为查找您正在处理的元素而进行的DOM遍历更少
考虑到所有这些,你的实际问题是你没有非常有效地计算点选择(这似乎是,找到当前的左值,然后迭代每个单元格的宽度,测试宽度是否与左值匹配)。注意,数学不是我的强项,所以我想有一种更有效/直接的方法来处理底层数学,但不需要循环来找到"活动"点。
我的方法:
cn = {
hero: function(r,lx,rx,fx,fs,ss,a){
var $r = $(r),
rc = $r.children(),
rcw = rc.width(),
rca = rc.size(),
rw = rcw * rca,
p = 'px';
$r.css({width: rw});
$(lx).click(function(){
var n = $r.position().left - rcw;
switch(fx){
case 'slide':
$r.stop(true,true)
.animate({
left: (n<-rw+rcw?0:n)+p
}, ss);
break;
case 'fade':
$r.stop(true,true)
.fadeOut(fs)
.animate({
left: (n<-rw+rcw?0:n)+p
}, 1)
.fadeIn(fs);
break;
}
});
$(rx).click(function(){
var n = $r.position().left + rcw;
switch(fx){
case 'slide':
$(r).stop(true,true)
.animate({
left: (n>0?-rw+rcw:n)+p
}, ss);
break;
case 'fade':
$r.stop(true,true)
.fadeOut(fs)
.animate({
left: (n>0?-rw+rcw:n)+p
}, 1)
.fadeIn(fs);
break;
}
});
// I have no idea why you're using match; wouldn't a boolean true work?
if (a.match('yes')) {
$('#hero').append('<div id="indicate"></div>');
$.each(rc, function(){
$('#indicate').append('<span></span>');
});
function indicate(fire){
var $indicates = $('#indicate span'),
left = parseInt($r.position().left),
count = $indicates.length;
var i = (left / -rcw) + 2;
if (i > count || fire !== true) {
i = 1;
}
$indicates
.removeClass('active')
.parent()
.find('span:nth-child('+ i +')')
.addClass('active');
if (fire) {
$(lx).click();
}
setTimeout(function(){
indicate(true);
}, 3000);
}
indicate(false);
$(lx).parent().hide();
}
}
}
$(function(){
cn.hero('#reel', '#next', '#prev', 'slide', 300, 600, 'yes');
});
http://jsfiddle.net/kEG2p/