Question

我希望我的网站标题文字每秒都循环通过字体样式，我使用谷歌字体，所以我将有10个左右的字体将改变。我找到了类似的东西并对其进行了修改，但它使用了“点击”功能，并且与我网站上的其他元素混淆了。 Demo任何建议，有用的链接或演示都将受到赞赏。

需要避免这种情况：

setInterval(function() {

    var e = $.Event("click");

Answer 1

您可以删除对click事件的引用，并使用jQuery的each()来遍历您的元素。将您的函数放入您的时间间隔内，并将click更改为each：

setInterval(function () {

    $('.one, .two, .three, .four, .five, .six, .seven, .eight, .nine').each(function () {
        this.className = {
            three: 'four',
            four: 'five',
            five: 'six',
            six: 'seven',
            seven: 'eight',
            eight: 'nine',
            nine: 'one',
            one: 'two',
            two: 'three'
        }[this.className];
    });

}, 1000);

WORKING EXAMPLE

Answer 2

我无法对此进行测试，但我认为这应该完全符合我的要求。

var fonts = ["cabin", "roboto slab", "open sans", "open sans condensed", "roboto",      "oswald", "lato"];
var intervalDuration = 1000;
var currentFontIndex = 0;

setInterval(function(){
    $('h1').css('font-family', fonts[currentFontIndex];
    currentFontIndex++;
    if(currentFontIndex == fonts.length){
        currentFontIndex = 0;
    }
}, intervalDuration);

Answer 3

要做你想做的事情，你应该设置一个旋转字体的间隔，就是这样。像这样：

var i = 0;
var fonts = ["Arial", "Times New Roman", "Calibri"];

function changeFont(){
    document.getElementById("siteTitle").style.fontFamily = fonts[i];
    i++;
    if(i > fonts.length) { i = 0; }
}

window.setInterval(changeFont, 1000);

此Fiddle会向您显示演示版的工作版本。我赞扬你对JQuery的click（）函数的误用的认可。

每秒旋转字体类型，相同内容

3 个答案: