每隔X秒更新listTicker函数中的list属性

update list property in listTicker function every X seconds

本文关键字：list 属性 函数 listTicker 更新 每隔      更新时间：2023-09-26

我正在尝试创建一个使用jQuery fadeIn/fadeOut函数淡入和淡出数组中的对象的计时器。我参考了别人的代码，并能够得到它的大部分工作。我现在要做的是获取listTicker的list属性，每隔X秒更新一次，然后移动到下一个数组。我想我必须使用for循环，但我似乎不知道如何实现它。

下面是我能得到的工作:

var listTicker = function(options) {
    var defaults = {
        list: [],
        startIndex:0,
        interval: 3 * 1000,
    }   
    var options = $.extend(defaults, options);
    var listTickerInner = function(index) {
        if (options.list.length == 0) return;
        if (!index || index < 0 || index > options.list.length) index = 0;
        var value= options.list[index];
        options.trickerPanel.fadeOut(function() {
            $(this).html(value).fadeIn();
        });
        var nextIndex = (index + 1) % options.list.length;
        setTimeout(function() {
            listTickerInner(nextIndex);
        }, options.interval);
    };
    listTickerInner(options.startIndex);
};
var textlist = new Array("Saab", "Volvo", "BMW");
var textlist2 = new Array("Dell", "HP", "Toshiba");
var textlist3 = new Array("John", "Dave", "Greg");
var currentlist = new Array(textlist, textlist2, textlist3);
$(function() {
    listTicker({
        list: currentlist[0] ,
        startIndex:0,
        trickerPanel: $('#expression'),
        interval: 3 * 1000,
    });
});

对这段代码的组织/分离不是100%满意，但它实现了目标:

http://jsfiddle.net/49Y8s/

    options.trickerPanel.fadeOut(function() {
        $(this).html(value).fadeIn();
        var nextItemIndex = (index+1) < currentList.length ? (index+1) : 0;
        var nextListIndex = (function(){
            var val = listIndex;
            if(nextItemIndex==0){
                val = listIndex+1;
            }
            if(val >= options.lists.length){
                val = 0;
            }
            return val;
        })();
        setTimeout(function() {
            listTickerInner(nextListIndex,nextItemIndex);
        }, options.interval);
    });
相关文章：