Question

我试图在我的网站上显示3个引号，一个接一个。例如，报价No.1首先显示，5秒后报价消失，我想看第二个报价，然后是第三个报价......然后是第一个报价。

这是我的引用代码（可能会对其进行修改并再引用两个引号）：

<blockquote class="blockquote">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
                    <footer class="blockquote-footer">A name of someone, <cite title="Source Title">His job</cite></footer>
</blockquote>

我不确定如何在JS上做到这一点。这就是我认为代码的开头应该是：

setInterval(function () {
    $("x").fadeOut(500, function () {
        $("x").html($("x").html() == "";
        $("x").fadeIn(500);
    });
}, 5000)

我不确定我应该写什么而不是“x”，而且在这一行：$("x").html($("x").html() == "";。有什么建议吗？

Answer 1

尝试在数组中保存引号，然后迭代它（应该是自我记录）：

＆＃13;

var quotes = 
[
  {quote: "Some great quote", by: "Some great man", title: "With a nice title"},
  {quote: "Another quote", by: "Another great man", title: "With a pretty cool title"},
  {quote: "Last one for now", by: "A truly great man", title: "Without any title :("}
]

var quote_num = 0;

setInterval(function () {
  var quote = quotes[quote_num];
  quote_num  = (quote_num + 1) % quotes.length;
  
  $.when($(".quote").fadeOut(500)).then(function(){
    $("#quote").html(quote.quote);
    $("#quoted").html(quote.by);
    $("#title").html(quote.title);
    $(".quote").fadeIn(500);}
  );
}, 2500)

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<blockquote class="quote">
    <p id="quote">Original quote</p>
    <span id="quoted">Orignal great man</span> &nbsp;&nbsp;<cite id="title">His title</cite>
</blockquote>

＆＃13;

Answer 2

这是我的看法。

您可以将所有引号存储在数组中，然后循环遍历数组（按顺序或按随机顺序）

$(function() {
  var quotesStore = [{
    "quote": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.",
    "author": "Some One",
    "jobTitle": "Title One"
  }, {
    "quote": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.",
    "author": "Some Two",
    "jobTitle": "Title Two"
  }, {
    "quote": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.",
    "author": "Some Three",
    "jobTitle": "Title Three"
  }];

  var idx = 0;
  var updateQuotes = function() {
    $("#quotes").fadeOut(500, function() {
      $(this).find("blockquote > p").html(quotesStore[idx].quote);
      var citationDiv = $(this).find("blockquote > footer > cite");
      var footerDiv = $(this).find("blockquote > footer");

      $(citationDiv).html(quotesStore[idx].jobTitle);
      $(footerDiv).html(quotesStore[idx].author).append(citationDiv);
      $(this).fadeIn(500);

      idx++;

      // reset the index if bigger than array with quotes
      if (idx >= quotesStore.length) {
        idx = 0;
      }
    });
  };

  setInterval(updateQuotes, 2000); // In milliseconds, 2 * 1000 = 2 secs
});

cite {
  padding-left: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="quotes">
  <blockquote class="blockquote">
    <p></p>
    <footer class="blockquote-footer"><cite title="Source Title"></cite>
    </footer>
  </blockquote>
</div>

显示更多报价

2 个答案: