1

我正在开发一个网站，部分内容将是一个实时的“出发板”代码，例如：

离境板

我在 C# 方面非常有经验，但对 Javascript 完全没有经验。

我在 SO 上找到了以下 Javascript，它几乎可以满足我的要求：

<script type="text/javascript">

    $.fn.ticker = function (options) {

        options = $.extend({
            speed: 30
        }, options);

        var alph = 'ABCDEFGHIJKLMNOPQRSTUVXYZ01234567890,.:+=/();!- ';

        return this.each(function () {
            var k = 1,
            elems = $(this).children(),
            arr = alph.split(''),
            len = 0,
            fill = function (a) {
                while (a.length < len) {
                    a.push(' ');
                }
                return a;
            },
            texts = $.map(elems, function (elem) {
                var text = $(elem).text();
                len = Math.max(len, text.length);
                return text.toUpperCase();
            }),
            target = $('<div>'),
            render = function (print) {
                target.data('prev', print.join(''));
                fill(print);
                print = $.map(print, function (p) {
                    return p == ' ' ? '&#160;' : p;
                });
                return target.html('<span>' + print.join('</span><span>') + '</span>');
            },
            attr = {}

            $.each(this.attributes, function (i, item) {
                target.attr(item.name, item.value);
            });

            $(this).replaceWith(render(texts[0].split('')));

            target.click(function (e) {

                var next = fill(texts[k].split('')),
                prev = fill(target.data('prev').split('')),
                print = prev;

                $.each(next, function (i) {
                    if (next[i] == prev[i]) {
                        return;
                    }
                    var index = alph.indexOf(prev[i]),
                    j = 0,
                    tid = window.setInterval(function () {
                        if (next[i] != arr[index]) {
                            index = index == alph.length - 1 ? 0 : index + 1;
                        } else {
                            window.clearInterval(tid);
                        }
                        print[i] = alph[index];
                        render(print);
                    }, options.speed)
                });
                k = k == texts.length - 1 ? 0 : k + 1;
            });
        });
    };


    // Assign functions
    $('#mainfeatureslist').ticker();

    // Click it now
    $('#mainfeatureslist').click();


</script>

...结合必要的 JQuery 和适当的 HTML：

<div id="mainfeatureslistcontainer">
<ul id="mainfeatureslist">
<li>Live bus arrivals</li>
<li>Another feature here</li>
<li>Name of third feature</li>
</ul>
</div>

此代码生成一个列表，单击该列表时，将转换到下一个列表项。

但是，我希望列表以设定的时间间隔自动转换，而无需单击。

我试过一个简单的软糖，即

setInterval($('#mainfeatureslist').click(), 6000);

...但这似乎出于某种原因混淆了它；它会中断该过程并“跳转”到某个项目，然后不会再发生任何事情。

尽管对代码的作用有一个合理的了解，但我绝对不知道如何重构它来做我想做的事！生成自己的 .click 方法似乎很难实现——事实上，它是一段非常出色且紧凑的代码。

如何将其重构为每 5 秒“翻转”一次列表？

4

1 回答 1

4

setInterval需要一个函数- 现在您正在传递某个函数调用的返回值（在本例中为 jQuery 对象）。改用包含您要执行的代码的匿名函数：

setInterval(function() {
    $('#mainfeatureslist').click();
}, 6000);
于 2012-06-22T21:32:38.893 回答