javascript - 在 HTML 中加载多行文本(每 60 秒逐行)的最佳方法是什么？

Question

我的网站有一个显示页面。

我的主要居中文本每 60 秒更改一次。

我有大约 150 多行单独的文本，我希望页面循环浏览每一行。

加载这些文本行的最佳方式是什么？

即

1 对 1

从另一个文件加载它们？

只是想要最有效的方式来加载文本。

var divs = $('div[id^="content-"]').hide(),
  i = 0;

(function cycle() {

  divs.eq(i).fadeIn(2000)
    .delay(60000) // 1000 is 1 second
    .fadeOut(2000, cycle);

  i = ++i % divs.length;

})();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="content-1">text 1</div>
<div id="content-2">text 2</div>
<div id="content-3">text 3</div>
<div id="content-4">text 4</div>
<div id="content-5">text 5</div>
<div id="content-6">text 6</div>
<div id="content-7">text 7</div>
......
<div id="content-180">text 180</div>

Answer 1

这可以通过在 1 秒间隔内循环其内容的单个文本元素来完成请注意，我正在使用模数运算符来允许循环遍历数组(否则，当计数超过数组时，您将留下未定义的 aw长度。

请注意，您可以将其设置为变量，然后使用 clearInterval(variable);停止循环。

我也没有淡入淡出动画 - 但帽子应该很容易合并。

var content = ['This is text content 1',' This is another text  content', 'I am also a text content']; 
let contentLength = content.length;
let count=0;

function contentDisplay (){
   document.querySelector('#content').innerText = content[count % contentLength];
  count++;
}

// sets the initial display
contentDisplay();

// sets the interval to change the display
setInterval(contentDisplay, 1000);

#content {
  text-align: center;
  padding: 15px;
  font-size: 20px
  }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p id="content">text 1</p>