Javascript 显示不同的<；h1>；间隔文本

我想采取一系列的报价和显示不同的qoute在我的页面上每6秒

我曾尝试使用javascript函数在数组中循环并在新的qoute中淡出。但是我不断得到错误

qoutes

没有定义。我已尝试将数组移动到函数和

$（document）.ready（）

函数中，但仍然出现相同的错误

下面是我的app.js代码：

var quotes = [
"Don't Limit Your Challenges, Challenge Your Limits.",
"If the doors of perception were cleansed every thing would appear to man as it is, Infinite.",
"The Power of Imaginiation Makes Us Infinite",
"The finite mind tries to limit the infinite.",
"The Only Limits In Our Life Are Those We Impose on Ourselves."
 ];


var quoteTimer = function(){

for(var i = 0; i< qoutes.length; i++){
    $('.container').find('h1').fadeIn().text(qoutes[i]);

}
}


$(document).ready(function(){

setInterval(quoteTimer, 6000);
});

var引号=[
“不要限制你的挑战，挑战你的极限。”，
“如果感知之门被清理干净，一切事物都会在人类看来是无限的。”，
“想象的力量使我们无限”，
“有限的心灵试图限制无限。”，
“我们生活中唯一的限制是我们强加给自己的。”
];
var quoteTimer=function（）{
对于（变量i=0；i

2件事：

首先，这一行有一个输入错误（qoutes而不是引号）

---

调整您的时间延迟，这应该可以做到

更新：添加淡入淡出

更新2：删除占位符，添加注释

for(var i = 0; i< qoutes.length; i++){
    $('.container').find('h1').fadeIn().text(qoutes[i]);
}

var引号=[
“不要限制你的挑战，挑战你的极限。”，
“如果感知之门被清理干净，一切事物都会在人类看来是无限的。”，
“想象的力量使我们无限”，
“有限的心灵试图限制无限。”，
“我们生活中唯一的限制是我们强加给自己的。”
];
//变量以跟踪显示的上一个报价
var i=0；
//显示数组中的下一个引号
var quoteTimer=function（）{
//如果在数组末尾，请重置
如果（i>=quotes.length）{
i=0；
}
//淡出先前的引用，
//隐藏时，将文本更改为数组上的下一个引号
$（'h1'）.fadeOut（1000，function（）{
$（此）.text（引号[i]）；
});
//显示报价单
$（'h1'）.fadeIn（）；
//递增计数器1
i++；
}
$（文档）.ready（函数（）{
$（'h1'）.text（引号[i++]）；//用第一个引号初始化
设置间隔（quoteTimer，6000）；
});

试试这个：

var quotes = [
"Don't Limit Your Challenges, Challenge Your Limits.",
"If the doors of perception were cleansed every thing would appear to man as it is, Infinite.",
"The Power of Imaginiation Makes Us Infinite",
"The finite mind tries to limit the infinite.",
"The Only Limits In Our Life Are Those We Impose on Ourselves."
 ];


var quoteTimer = function(){
var num = Math.floor(Math.random() * 6);
    //console.log(quotes[num]);
    $('.container').find('h1').fadeIn().text(quotes[num]);
}


$(document).ready(function(){
    setInterval(quoteTimer, 6000);
});

。。。HTML

<div class="container">
  <h1>initial text</h1>
</div>


初始文本

。。。js

// define quotes array
var quotes = [
  "Don't Limit Your Challenges, Challenge Your Limits.",
  "If the doors of perception were cleansed every thing would appear to man as it is, Infinite.",
  "The Power of Imaginiation Makes Us Infinite",
  "The finite mind tries to limit the infinite.",
  "The Only Limits In Our Life Are Those We Impose on Ourselves."
];

// initialise current quote index
var quoteIndex = 0;

// set target element
var $target = $('.container').find('h1');

// create timer function
var quoteTimer = function() {
  // set target text to current quote
  $target.fadeIn().text(quotes[quoteIndex]);
  // increment the current index, or reset to 0 if on the last quote
  quoteIndex = quoteIndex < quotes.length - 1 ? quoteIndex + 1 : 0;
}

// fire it up..!
$(document).ready(function() {
  setInterval(quoteTimer, 6000);
});

//定义引号数组
变量引号=[
“不要限制你的挑战，挑战你的极限。”，
“如果感知之门被清理干净，一切事物都会在人类看来是无限的。”，
“想象的力量使我们无限”，
“有限的心灵试图限制无限。”，
“我们生活中唯一的限制是我们强加给自己的。”
];
//初始化当前报价索引
var quoteIndex=0；
//设置目标元素
var$target=$（'.container'）。find（'h1'）；
//创建计时器功能
var quoteTimer=function（）{
//将目标文本设置为当前引号
$target.fadeIn（）.text（引号[quoteIndex]）；
//增加当前索引，或在最后一个报价上重置为0
quoteIndex=quoteIndex

小提琴：
纠正打字错误
qoutes
，它应该是
引号

setInterval
将在指定的持续时间后执行回调，并将继续执行。您可能需要首先调用处理程序（
setInterval回调函数
）

要实现淡出效果，元素必须处于不可见状态。。在
fadeIn（）之前使用
.hide（）

试试这个：

var quotes = [
"Don't Limit Your Challenges, Challenge Your Limits.",
"If the doors of perception were cleansed every thing would appear to man as it is, Infinite.",
"The Power of Imaginiation Makes Us Infinite",
"The finite mind tries to limit the infinite.",
"The Only Limits In Our Life Are Those We Impose on Ourselves."
 ];


var quoteTimer = function(){
var num = Math.floor(Math.random() * 6);
    //console.log(quotes[num]);
    $('.container').find('h1').fadeIn().text(quotes[num]);
}


$(document).ready(function(){
    setInterval(quoteTimer, 6000);
});


var引号=[
“不要限制你的挑战，挑战你的极限。”，
“如果感知之门被清理干净，一切事物都会在人类看来是无限的。”，
“想象的力量使我们无限”，
“有限的心灵试图限制无限。”，
“我们生活中唯一的限制是我们强加给自己的。”
];
var i=0；
var elem=$（'.container'）。find（'h1'）；
var quoteTimer=function（）{
elem.hide（）.fadeIn（1000）.text（引号[i]）；
i=++i%quotes.length；
}
引号（）；
$（文档）.ready（函数（）{
设置间隔（quoteTimer，6000）；
});

请注意，您声明了数组
引号
，但随后尝试循环一个名为
qoutes
的数组（它们不相同）-首先修复键入错误，如果没有帮助，请重试-尽管如此，每次调用函数时，您都会打印循环中的所有引号。请检查引号的拼写。在for循环中。您的答案是正确的，但请尝试添加更多解释以使其清晰。这是真的，@ochi的答案显示了此解决方案，原始海报的更多选项：）非常感谢。看来我的方法离我想要实现的目标还很远。不远，只是有点偏离了循环，但几乎达到了。。很高兴我能帮忙