2

我需要一些帮助来实现一个旋转报价 jquery 插件。

这是Jquery代码：

(function($) {
    $.fn.quovolver = function(speed, delay) {

        /* Sets default values */
        if (!speed) speed = 500;
        if (!delay) delay = 6000;

        // If "delay" is less than 4 times the "speed", it will break the effect 
        // If that's the case, make "delay" exactly 4 times "speed"
        var quaSpd = (speed*4);
        if (quaSpd > (delay)) delay = quaSpd;

        // Create the variables needed
        var quote = $(this),
            firstQuo = $(this).filter(':first'),
            lastQuo = $(this).filter(':last'),
            wrapElem = '<div id="quote_wrap"></div>';

        // Wrap the quotes
        $(this).wrapAll(wrapElem);

        // Hide all the quotes, then show the first
        $(this).hide();
        $(firstQuo).show();

        // Set the hight of the wrapper
        $(this).parent().css({height: $(firstQuo).height()});       

        // Where the magic happens
        setInterval(function(){

            // Set required hight and element in variables for animation
            if($(lastQuo).is(':visible')) {
                var nextElem = $(firstQuo);
                var wrapHeight = $(nextElem).height();
            } else {
                var nextElem = $(quote).filter(':visible').next();
                var wrapHeight = $(nextElem).height();
            }

            // Fadeout the quote that is currently visible
            $(quote).filter(':visible').fadeOut(speed);

            // Set the wrapper to the hight of the next element, then fade that element in
            setTimeout(function() {
                $(quote).parent().animate({height: wrapHeight}, speed);
            }, speed);

            if($(lastQuo).is(':visible')) {
                setTimeout(function() {
                    $(firstQuo).fadeIn(speed*2);
                }, speed*2);

            } else {
                setTimeout(function() {
                    $(nextElem).fadeIn(speed);
                }, speed*2);
            }

        }, delay);

    };
})(jQuery);

我已将此代码保存为我网站中的 JS 文件

这是我的 HTML：

<link rel="stylesheet" media="screen" type="text/css" href="../../style.css" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="../../js/jquery.quovolver.js"></script>




<body>

         <div>
        I want my rotating quotes HERE


        </div>


</body>
</html>

有人告诉我“使用这行代码调用文档就绪函数中的脚本：$(’element’).quovolver();”

我的问题是，我在哪里以及如何存储我的引号，以及如何在我在 html 页面中注明的空间中调用这个 Jquery 插件？

谢谢你的帮助！！

4

1 回答 1

0

这是我在文档中找到的内容：

Javascript (jQuery)

// CASE : in an extern file
// When document is ready...
$(document).ready(function() {
  // Call Quovolver on the '.quotes' object
  $('.quotes').quovolver();
});

// CASE : in HTML's head
<script>
    $(document).ready(function() {
      // Call Quovolver on the '.quotes' object
      $('.quotes').quovolver();
    });
</script>

HTML

<div class="quotes">
  <blockquote>
    <p>“That which can be asserted without evidence, can be dismissed without evidence.”&lt;/p>
    <p>— Christopher Hitchens (Quote 1)</p>
  </blockquote>

  <blockquote>
    <p>“Owners of dogs will have noticed that, if you provide them with food and water and shelter and affection, they will think you are god. Whereas owners of cats are compelled to realize that, if you provide them with food and water and shelter and affection, they draw the conclusion that they are gods.”&lt;/p>
    <p>— Christopher Hitchens (Quote 2)</p>
  </blockquote>

  <blockquote>
    <p>“Everybody does have a book in them, but in most cases that's where it should stay.”&lt;/p>
    <p>— Christopher Hitchens (Quote 3)</p>
  </blockquote>

  <blockquote>
    <p>“Beware the irrational, however seductive. Shun the 'transcendent' and all who invite you to subordinate or annihilate yourself. Distrust compassion; prefer dignity for yourself and others. Don't be afraid to be thought arrogant or selfish. Picture all experts as if they were mammals. Never be a spectator of unfairness or stupidity. Seek out argument and disputation for their own sake; the grave will supply plenty of time for silence. Suspect your own motives, and all excuses. Do not live for others any more than you would expect others to live for you.”&lt;/p>
    <p>— Christopher Hitchens (Quote 4)</p>
  </blockquote>

  <blockquote>
  <p>“Human decency is not derived from religion. It precedes it.”&lt;/p>
  <p>— Christopher Hitchens (Quote 5)</p>
  </blockquote>

  <blockquote>
    <p>“Many religions now come before us with ingratiating smirks and outspread hands, like an unctuous merchant in a bazaar. They offer consolation and solidarity and uplift, competing as they do in a marketplace. But we have a right to remember how barbarically they behaved when they were strong and were making an offer that people could not refuse.”&lt;/p>
    <p>— Christopher Hitchens (Quote 6)</p>
  </blockquote>
</div><!-- .quotes -->

将.quotes类添加到您的div中，将其填充为本示例，并在文档加载时调用 jQuery 代码。

于 2013-03-25T12:04:58.667 回答