Question

这是为了在三个不同的h3元素之间旋转。它目前有效，但看起来很草率。当我最终模仿p和img元素时，它会比它需要的时间更长。我是jQuery的新手，所以我正在寻找一些清理和抛光。

HTML：

<h3 id="subtitle1">first subtitle</h3>

jQuery的：

setInterval(function() {
    if($("#subtitle1").length) {
        $('#subtitle1').replaceWith("<h3 id='subtitle2'>second subtitle</h3>");
    } else if($("#subtitle2").length) {
        $('#subtitle2').replaceWith("<h3 id='subtitle3'>third subtitle</h3>");
    } else if($("#subtitle3").length) {
        $('#subtitle3').replaceWith("<h3 id='subtitle1'>first subtitle</h3>");
    }
}, 2000);

Answer 1

这只是一个例子 - 您必须对其进行修改以满足您的确切需求。

<强> HTML

<h3 id="header-title">This is some title text</h3>
<p id="header-text">This is some text</p>
<img id="header-image" src="./images/something.jpg" />

<强>的Javascript

var mods = [{
        title: "This is header text 1",
        text: "This is paragraph text 1",
        image: "./images/header-image-01.jpg"
    }, {
        title: "This is header text 2",
        text: "This is paragraph text 2",
        image: "./images/header-image-02.jpg"
    }, {
        title: "This is header text 3",
        text: "This is paragraph text 3",
        image: "./images/header-image-03.jpg"
    }];

var counter = 0;

setInterval(function() {
    counter = (counter + 1) % mods.length;

    $("#header-title").text(mods[counter].title);
    $("#header-text").text(mods[counter].text);
    $("#header-image").attr("src", mods[counter].image);

}, 20000);

它只是循环遍历数组mods中的所有更改，每20秒进行一次更改。添加/删除属性并更改区间中的功能以适合您的页面。

您也可以根据需要扩展数组中的元素数量而不会破坏它。

使用jquery .replaceWith在三个标头之间旋转

1 个答案: