如何在wordpress中使用javascript每10秒显示和隐藏标题答案

【问题标题】：how to show and hide heading every 10 seconds with javascript in wordpress如何在wordpress中使用javascript每10秒显示和隐藏标题
【发布时间】：2022-01-24 20:49:09
【问题描述】：

我有一个部分，该部分有 3 个标题，我想一一展示间隔 10 秒

就像在strat你会有一个标题和它的内容，然后10秒后标题内的文本会改变，10秒后它会改变aagin

<h2>helllo world</h2>

<h2>helllo world 2</h2>

<h2>helllo world 3</h2>

我有 3 个标题，必须一一显示，

在我的代码中，我确实喜欢这个禁用所有然后显示一个但我有问题循环它

<body>
    <h1>hellow orld</h1>
    <h1>hellow orld2</h1>
    <h1>hellow orld3</h1>

    <script>
        let myarr = document.querySelectorAll('h1');
        let myindex = 0;

        console.log(myarr)

        for (let index2 = 0; index2 < 10000; index2++) {
            one();
        setTimeout(impFunct, 1000);
            
        }

        function one() {
            myarr.forEach(element => {
            element.style.display = 'none';
            });

        myarr[myindex].style.display = 'block';
        }
    
        function impFunct() {
            if(myindex==2) {myindex=0; return;}
            myindex++
            console.log(myindex);
        }
    </script>
</body>

如果你知道任何插件或任何方法可以做到这一点，我所做的一切都是为了在 wordpress 中工作。

请帮忙

【问题讨论】：

标签： javascript html wordpress

【解决方案1】：

<body>
    <h1>hellow orld1</h1>
    <h1>hellow orld2</h1>
    <h1>hellow orld3</h1>

    <script>
        let headings = document.querySelectorAll('h1');
        let currentHeading = 0;
        headings.forEach(heading => heading.style.display='none')
        
        const showNextHeading = (intervalId) => {
          headings.forEach((heading, i) => {
            i === currentHeading 
              ? heading.style.display = 'block'
              : heading.style.display = 'none'
          })
          currentHeading +=1

         // if you don't want headings to keep changing forever uncomment line bellow
         // if(currentHeading === 3) clearInterval(intervalId)

          if (currentHeading === 3) currentHeading = 0

        }
        
        showNextHeading()
        const intervalId = setInterval(() => showNextHeading(intervalId), 1000);
        
    </script>
</body>

【讨论】：

第一个间隔没有显示任何标题，但应该显示
假设我将时间间隔更改为 10000，然后前 10 秒屏幕为空白
我已经调整了代码来解决这个问题

【解决方案2】：

<!DOCTYPE html>
<body>
    <h1>hellow orld</h1>
    <h1>hellow orld2</h1>
    <h1>hellow orld3</h1>

    <script>
        let myarr = document.querySelectorAll('h1');
        let myindex = 0;
        timeout();
        function timeout() {
            setTimeout(function () {
                myarr.forEach(element => {
                    element.style.display = 'none';
                });
                myarr[myindex].style.display = 'block';
                if(myindex == 2){
                    myindex = 0;
                } else {
                    myindex++;
                }

                timeout();
            }, 1000);
        }
    </script>
</body>
</html>

【讨论】：

谢谢@mosafir
欢迎。 @player99