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

Question

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

我尝试过使用循环遍历数组并淡入新 qoute 的 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

两件事：

首先，您在这一行中有一个错字（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

试试这个：

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 3

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

小提琴：https://jsfiddle.net/zpj1jjxe/1/

Answer 4

更正错字qoutes，应该是quotes

要达到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

Answer 5

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

更新：添加了淡入淡出

Update2：移除占位符，添加 cmets

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>