Question

我想采用一系列引号，每隔6秒在我的页面上显示不同的qoute。

我尝试使用循环遍历数组的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);
});

Answer 1

2件事：

首先，你在这一行中有一个拼写错误（ qoutes 而不是引号）

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

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

要获得fadeOut效果，元素必须处于invisible状态。在.hide()之前使用fadeIn()

试试这个：

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：删除了占位符，添加了评论

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>

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

5 个答案: