0

我以前使用过此代码，但它使数组随机化。但我似乎无法让这个脚本每 5 秒更改一次页面标题。

<script type="text/javascript">
    $(document).ready(function() {
        var helloArray = ["hello", "bonjour", "hola", "konnichiwa", "hujambo", "cześć", "hei", "ciao"];
        $('#page_title').loadText( helloArray, 5000 ); // ( array, interval )
        document.title = $('#page_title').text();
    });
    // custom jquery plugin loadText()
    $.fn.loadText = function( textArray, interval ) {
        return this.each( function() {
            var obj = $(this);
            obj.fadeOut( 'slow', function() { 
                obj.empty().html( random_array( textArray ) );  
                obj.fadeIn( 'fast' );
            });
            timeOut = setTimeout( function(){ obj.loadText( textArray, interval )}, interval );
            $("#text-reload").click( function(){ 
                if( !obj.is(':animated') ) { clearTimeout( timeOut ); obj.loadText( textArray, interval );} // animation check prevents "too much recursion" error in jQuery 
            });
        });
    }
    //public function
    function random_array( aArray ) {
        var rand = Math.floor( Math.random() * aArray.length + aArray.length );
        var randArray = aArray[ rand - aArray.length ];
        return randArray;
    }
</script>

#page_title我已经在我的页面中放置了一个 div display:none，该 div 上的内容发生了变化，但标题却没有。

4

2 回答 2

1

如果您不关心在动画停止后保留数组的顺序，您可以使用以下命令：

// custom jquery plugin loadText()
$.fn.loadText = function( textArray, interval ) {
    return this.each( function() {
        var obj = $(this);
        obj.fadeOut( 'slow', function() {
            var elem = textArray[0];
            obj.empty().html( elem );
            textArray.shift();
            textArray.push(elem);
            obj.fadeIn( 'fast' );
        });
        timeOut = setTimeout( function(){ obj.loadText( textArray, interval )}, interval );
        $("#text-reload").click( function(){ 
            if( !obj.is(':animated') ) { clearTimeout( timeOut ); obj.loadText( textArray, interval );} // animation check prevents "too much recursion" error in jQuery 
        });
    });
};

$(document).ready(function() {
    var helloArray = ["hello", "bonjour", "hola", "konnichiwa", "hujambo", "cześć", "hei", "ciao"];
    $('#page_title').loadText( helloArray, 5000 ); // ( array, interval )
    document.title = $('#page_title').text();
});

请注意，您 shift() 数组，然后将每个元素 push() 回到数组的末尾，因此如果停止循环，数组可能与发送它的顺序不同。

jsFiddle：http: //jsfiddle.net/hY2rv/1/

于 2013-04-17T13:48:22.823 回答
0

尝试

$(document).ready(function() {
    var helloArray = ["hello", "bonjour", "hola", "konnichiwa", "hujambo",
            "cześć", "hei", "ciao"];
    $('#page_title').loadText(helloArray, 5000); // ( array, interval )
    document.title = $('#page_title').text();
});
// custom jquery plugin loadText()
$.fn.loadText = function(textArray, interval) {
    return this.each(function() {
        var obj = $(this), intervalId;

        function change() {
            obj.fadeOut('slow', function() {
                var text = random_array(textArray);
                obj.html(text).fadeIn('fast');
                document.title = text;
            });
        }

        function start() {
            intervalId = setInterval(change, interval);
        };

        start();

        $("#text-reload").click(function() {
            if (!obj.is(':animated')) {
                clearInterval(intervalId);
                start();
            }
        });
    });
}
// public function
function random_array(aArray) {
    var rand = Math.floor(Math.random() * aArray.length + aArray.length);
    var randArray = aArray[rand - aArray.length];
    return randArray;
}
于 2013-04-17T13:38:30.250 回答