我的内容滑块JavaScript/Jquery的状态指示器缺少什么

有些事情你做得不好或者是错误的。例如：

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/