jQuery的运行通过阵列更换页面的标题每5秒(jQuery Run through array t

我以前用这个代码，但它会随机排列。 但我似乎无法获得此脚本来更改页面标题，每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到我的网页有display:none对这个div内容的变化，但标题少了点。

Answer 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();
});

请注意，你转移（）的阵列，然后按（）每一个元素重新排列的结束，所以如果你停止循环数组可能不是你送的顺序相同。

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

Answer 2:

尝试

$(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;
}

文章来源: jQuery Run through array to replace page title every 5 seconds