在间隔上显示不同的 <h1> 文本

Question

我想获取一组引号并每 6 秒在我的页面上显示一个不同的引号。

我尝试使用 javascript 函数循环遍历数组并在新的引号中淡出。但我一直收到错误 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);
});

Answer 1

2 件事：

首先，您在这一行中有错字（qoutes 而不是 quotes）

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

其次，上面的代码并没有像你想的那样，它会每6秒快速循环一次所有报价，并显示最后一个报价

试试下面的方法，它会不断地从列表中随机选择一个新的报价。

  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(){
      //pick a random quote
      var quote = getRandomInt(0,4)
      //display it
      $('.container').find('h1').fadeIn().text(quotes[quote]);
    }

    //function to pick a random integer.
    function getRandomInt(min, max) {
       return Math.floor(Math.random() * (max - min + 1)) + min;
    }

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

Fiddle

Answer 2

调整你的时间延迟，这应该可以解决问题

更新：增加了褪色

更新 2：删除占位符，添加评论

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."
];

// variable to keep track of last quote displayed
var i = 0;

// displays the next quote in the array
var quoteTimer = function() {
  
  // if at end of array, reset
  if (i >= quotes.length) {
    i = 0;
  }

  // fade out previous quote, 
  // while hidden, change the text to the next quote on the array
  $('h1').fadeOut(1000, function(){
    $(this).text(quotes[i]);
  });
  
  // display the quote
  $('h1').fadeIn();

  // increment counter by one
  i++;
}


$(document).ready(function() {
  $('h1').text(quotes[i++]); // initialize with first quote
  setInterval(quoteTimer, 6000);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1></h1>

Answer 3

试试这个：

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);
});

Answer 4

...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);
});

Fiddle: https://jsfiddle.net/zpj1jjxe/1/

Answer 5

更正错别字qoutes，应该是quotes

setInterval 将在指定的持续时间后执行回调并将继续执行。您可能必须最初调用处理程序（setInterval callback function）。

要达到fadeOut效果，元素必须处于invisible状态。在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 i = 0;
var elem = $('.container').find('h1');
var quoteTimer = function() {
  elem.hide().fadeIn(1000).text(quotes[i]);
  i = ++i % quotes.length;
}
quoteTimer();
$(document).ready(function() {
  setInterval(quoteTimer, 6000);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="container">
  <h1></h1>
</div>

Fiddle

在间隔上显示不同的 <h1> 文本

Display different <h1> text on interval

javascript

arrays

jquery

loops

setinterval