Вращающиеся цитаты Jquery

Мне нужна помощь в реализации плагина 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();"

У меня вопрос, где и как я могу хранить свои цитаты, и как мне вызвать этот плагин Jquery в месте, которое я отметил на HTML-странице?

Спасибо за вашу помощь!!

Источник

1 ответ

Решение

Вот что я нашел в документации:

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.”</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.”</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.”</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.”</p>
    <p>— Christopher Hitchens (Quote 4)</p>
  </blockquote>

  <blockquote>
  <p>“Human decency is not derived from religion. It precedes it.”</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.”</p>
    <p>— Christopher Hitchens (Quote 6)</p>
  </blockquote>
</div><!-- .quotes -->

Добавить .quotes класс к вашему divзаполните его как этот пример и вызовите код jQuery для загрузки документа.

Источник
Другие вопросы по тегам