淡化文本循环 - 不循环,看不到文本

时间:2013-03-12 18:57:30

标签: javascript jquery loops text fade



仅供参考,此问题已得到解决。 www.WEBCO-MN.com - 滚动到底部,上面写着“客户在说什么......”感谢您的帮助!

我对这一切都很陌生。我知道HTML - 不是专业人士。
我真的不懂javascript。我习惯于复制和粘贴它。我正在尝试创建一个推荐部分,以便它会从一个推荐书淡化到另一个推荐书,等等。一旦我使用了我在这里找到的代码:
Fade in & out text loop - jQuery,没有任何显示。

这是我正在处理的页面的链接:
http://www.webco-mn.com/webco_test3.html

这是我发生的事情:
HTML:

    <h2 class="quotes">first testimonial</h2>
    <h2 class="quotes">second testimonial</h2>

JS:

    (function() {

var quotes = $(".quotes");
var quoteIndex = -1;

function showNextQuote() {
    ++quoteIndex;
    quotes.eq(quoteIndex % quotes.length)
        .fadeIn(2000)
        .delay(2000)
        .fadeOut(2000, showNextQuote);
}

showNextQuote();

    })();

和CSS:

    .quotes {display: none;}​

有人可以帮我弄清楚发生了什么事吗?!

PS - 我没有设计这个网站,我没有触及任何设计的HTML部分,我不是那么高级,我不想毁掉任何东西。

1 个答案:

答案 0 :(得分:0)

为了使用该jQuery代码,您需要链接到jQuery javascript库。

在您链接到的测试页面中,您在关闭html标记后引用了要使用的脚本和jQuery:

</html>
<script>
(function() {

    var quotes = $(".quotes");
    var quoteIndex = -1;

    function showNextQuote() {
        ++quoteIndex;
        quotes.eq(quoteIndex % quotes.length)
            .fadeIn(2000)
            .delay(2000)
            .fadeOut(2000, showNextQuote);
    }

    showNextQuote();

})();</script>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  <script>window.jQuery || document.write('<script src="js/libs/jquery-1.7.1.min.js"><\/script>')</script>

尝试在<head>元素的末尾添加对jQuery的引用,并在<body>元素的末尾添加您尝试使用的脚本。

我还建议您阅读此basic overview of how jQuery works