我有一個部分，該部分有 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 中作業。
請幫忙
uj5u.com熱心網友回復：
<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>uj5u.com熱心網友回復：
<!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>
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/420981.html
標籤：