jquery quote rotator quovolver - 따옴표를 임의로 만들 수있는 방법이 있습니까?

Question

드디어 멋진 사이트 "quovolver"를 내 사이트에서 사용할 수있게되었고 내 평가는 모두 내 사이드 ​​바에서 멋진 방식으로 돌아 왔습니다. ...

나는 그 대신에 모두 같은 순서로 실행하고 싶습니다. 시간 (hvtml에있는 순서대로 그들을 통해 quovolver주기에 대한 스크립트 ...) 그들은 스크립트에 의해 무작위로 호출됩니다 ...

이것은 가능한가 ?? 여기

는 스크립트입니다

/** 
* jQuery Quovolver 2.0.2 
* https://github.com/sebnitu/Quovolver 
* 
* By Sebastian Nitu - Copyright 2012 - All rights reserved 
* Author URL: http://sebnitu.com 
*/ 
(function($) { 
    $.fn.quovolver = function(options) { 

     // Extend our default options with those provided. 
     var opts = $.extend({}, $.fn.quovolver.defaults, options); 

     // This allows for multiple instances of this plugin in the same document 
     return this.each(function() { 

      // Save our object 
      var $this = $(this); 

      // Build element specific options 
      // This lets me access options with this syntax: o.optionName 
      var o = $.meta ? $.extend({}, opts, $this.data()) : opts; 

      // Initial styles and markup 
      $this.addClass('quovolve') 
       .css({ 'position' : 'relative' }) 
       .wrap('<div class="quovolve-box"></div>'); 

      if(o.children) { 
       var groupMethod = 'find'; 
      } else { 
       var groupMethod = 'children'; 
      } 

      // Initialize element specific variables 
      var $box = $this.parent('.quovolve-box'), 
       $items = $this[groupMethod](o.children), 
       $active = 1, 
       $total = $items.length; 

      // Hide all except the first 
      $items.hide().filter(':first').show(); 

      // Call build navigation function 
      if (o.navPrev || o.navNext || o.navNum || o.navText) { 
       o.navEnabled = true; 
       var $nav = buildNav(); 
      } else { 
       o.navEnabled = false; 
      } 

      // Call equal heights function 
      if (o.equalHeight) { 
       equalHeight($items); 
       // Recalculate equal heights on window resize 
       $(window).resize(function() { 
        equalHeight($items); 
        $this.css('height', $($items[$active -1]).outerHeight()); 
       }); 
      } 

      // Auto play interface 
      if (o.autoPlay) { 
       var $playID = autoPlay(); 
       if (o.stopOnHover) { 
        var $playID = stopAutoPlay($playID); 
       } else if (o.pauseOnHover) { 
        var $playID = pauseAutoPlay($playID); 
       } 
      } 

      // Go To function 
      function gotoItem(itemNumber) { 

       // Check if stuff is already being animated and kill the script if it is 
       if($items.is(':animated') || $this.is(':animated')) return false; 
       // If the container has been hidden, kill the script 
       // This prevents the script from bugging out if something hides the revolving 
       // object from another script (tabs for example) 
       if($box.is(':hidden')) return false; 

       // Don't let itemNumber go above or below possible options 
       if (itemNumber < 1) { 
        itemNumber = $total; 
       } else if (itemNumber > $total) { 
        itemNumber = 1; 
       } 

       // Create the data object to pass to our transition method 
       var gotoData = { 
         current : $($items[$active -1]), // Save currently active item 
         upcoming : $($items[itemNumber - 1]) // Save upcoming item 
       } 

       // Save current and upcoming hights and outer heights 
       gotoData.currentHeight = getHiddenProperty(gotoData.current); 
       gotoData.upcomingHeight = getHiddenProperty(gotoData.upcoming); 
       gotoData.currentOuterHeight = getHiddenProperty(gotoData.current, 'outerHeight'); 
       gotoData.upcomingOuterHeight = getHiddenProperty(gotoData.upcoming, 'outerHeight'); 

       // Save current and upcoming widths and outer widths 
       gotoData.currentWidth = getHiddenProperty(gotoData.current, 'width'); 
       gotoData.upcomingWidth = getHiddenProperty(gotoData.upcoming, 'width'); 
       gotoData.currentOuterWidth = getHiddenProperty(gotoData.current, 'outerWidth'); 
       gotoData.upcomingOuterWidth = getHiddenProperty(gotoData.upcoming, 'outerWidth'); 

       // Transition method 
       if (o.transition != 'basic' && 
        typeof o.transition == 'string' && 
        eval('typeof ' + o.transition) == 'function') { 
        // Run the passed method 
        eval(o.transition + '(gotoData)'); 
       } else { 
        // Default transition method 
        basic(gotoData); 
       } 

       // Update active item 
       $active = itemNumber; 

       // Update navigation 
       updateNavNum($nav); 
       updateNavText($nav); 

       // Disable default behavior 
       return false; 
      } 

      // Build navigation 
      function buildNav() { 
       // Check the position of the nav and insert container 
       if (o.navPosition === 'above' || o.navPosition === 'both') { 
        $box.prepend('<div class="quovolve-nav quovolve-nav-above"></div>'); 
        var nav = $box.find('.quovolve-nav'); 
       } 
       if (o.navPosition === 'below' || o.navPosition === 'both') { 
        $box.append('<div class="quovolve-nav quovolve-nav-below"></div>'); 
        var nav = $box.find('.quovolve-nav'); 
       } 
       if (o.navPosition === 'custom') { 
        if (o.navPositionCustom !== '' && $(o.navPositionCustom).length !== 0) { 
         $(o.navPositionCustom).append('<div class="quovolve-nav quovolve-nav-custom"></div>'); 
         var nav = $(o.navPositionCustom).find('.quovolve-nav'); 
        } else { 
         console.log('Error', 'That custom selector did not return an element.'); 
        } 
       } 

       // Previous and next navigation 
       if (o.navPrev) { 
        nav.append('<span class="nav-prev"><a href="#">' + o.navPrevText + '</a></span>'); 
       } 
       if (o.navNext) { 
        nav.append('<span class="nav-next"><a href="#">' + o.navNextText + '</a></span>'); 
       } 
       // Numbered navigation 
       if (o.navNum) { 
        nav.append('<ol class="nav-numbers"></ol>'); 
        for (var i = 1; i < ($total + 1); i++) { 
         nav 
          .find('.nav-numbers') 
          .append('<li><a href="#item-' + i + '">' + i + '</a></li>'); 
        } 
        updateNavNum(nav); 
       } 
       // Navigation description 
       if (o.navText) { 
        nav.append('<span class="nav-text"></span>'); 
        updateNavText(nav); 
       } 

       return nav; 
      } 

      // Get height of a hidden element 
      function getHiddenProperty(item, property) { 
       // Default method 
       if (!property) property = 'height'; 

       // Check if item was hidden 
       if ($(this).is(':hidden')) { 
        // Reveal the hidden item but not to the user 
        item.show().css({'position':'absolute', 'visibility':'hidden', 'display':'block'}); 
       } 

       // Get the requested property 
       var value = item[property](); 

       // Check if item was hidden 
       if ($(this).is(':hidden')) { 
        // Return the originally hidden item to it's original state 
        item.hide().css({'position':'static', 'visibility':'visible', 'display':'none'}); 
       } 
       // Return the height 
       return value; 
      } 

      // Equal Column Heights 
      function equalHeight(group) { 
       var tallest = 0; 
       group.height('auto'); 
       group.each(function() { 
        if ($(this).is(':visible')) { 
         var thisHeight = $(this).height(); 
        } else { 
         var thisHeight = getHiddenProperty($(this)); 
        } 
        if(thisHeight > tallest) { 
         tallest = thisHeight; 
        } 
       }); 
       group.height(tallest); 
      } 

      // Update numbered navigation 
      function updateNavNum(nav) { 
       if (o.navEnabled) { 
        nav.find('.nav-numbers li').removeClass('active'); 
        nav 
         .find('.nav-numbers a[href="#item-' + $active + '"]') 
         .parent() 
         .addClass('active'); 
       } 
      } 

      // Update navigation description 
      function updateNavText(nav) { 
       if (o.navEnabled) { 
        var content = o.navTextContent.replace('@a', $active).replace('@b', $total); 
        nav.find('.nav-text').text(content); 
       } 
      } 

      // Start auto play 
      function autoPlay() { 
       $box.addClass('play'); 
       intervalID = setInterval(function() { 
        gotoItem($active + 1); 
       }, o.autoPlaySpeed); 
       return intervalID; 
      } 

      // Pause auto play 
      function pauseAutoPlay(intervalID) { 
       if (o.stopAutoPlay !== true) { 
        $box.hover(function() { 
         $box.addClass('pause').removeClass('play'); 
         clearInterval(intervalID); 
        }, function() { 
         $box.removeClass('pause').addClass('play'); 
         clearInterval(intervalID); 
         intervalID = autoPlay(); 
        }); 
        return intervalID; 
       } 
      } 

      // Stop auto play 
      function stopAutoPlay(intervalID) { 
       $box.hover(function() { 
        $box.addClass('stop').removeClass('play'); 
        clearInterval(intervalID); 
       }, function() {}); 
       return intervalID; 
      } 

      // Transition Effects 
      // Basic (default) Just swaps out items with no animation 
      function basic(data) { 
       $this.css('height', data.upcomingOuterHeight); 
       data.current.hide(); 
       data.upcoming.show(); 
       if (o.equalHeight === false) { 
        $this.css('height', 'auto'); 
       } 
      } 

      // Fade animation 
      function fade(data) { 

       // Set container to current item's height 
       $this.height(data.currentOuterHeight); 

       // Fade out the current container 
       data.current.fadeOut(o.transitionSpeed, function() { 
        // Resize container to upcming item's height 
        $this.animate({ 
         height : data.upcomingOuterHeight 
        }, o.transitionSpeed, function() { 
         // Fade in the upcoming item 
         data.upcoming.fadeIn(o.transitionSpeed, function() { 
          // Set height of container to auto 
          $this.height('auto'); 
         }); 
        }); 
       }); 

      } 

      // Bind to the forward and back buttons 
      $('.nav-prev a').click(function() { 
       return gotoItem($active - 1); 
      }); 
      $('.nav-next a').click(function() { 
       return gotoItem($active + 1); 
      }); 

      // Bind the numbered navigation buttons 
      $('.nav-numbers a').click(function() { 
       return gotoItem($(this).text()); 
      }); 

      // Create a public interface to move to a specific item 
      $(this).bind('goto', function (event, item) { 
       gotoItem(item); 
      }); 

     }); // @end of return this.each() 

    }; 

    $.fn.quovolver.defaults = { 

     children : '', // If selector is provided, we will use the find method to get the group of items 

     transition : 'fade', // The style of the transition 
     transitionSpeed : 300, // This is the speed that each animation will take, not the entire transition 

     autoPlay : true, // Toggle auto rotate 
     autoPlaySpeed : 6000, // Duration before each transition 
     pauseOnHover : true, // Should the auto rotate pause on hover 
     stopOnHover : false, // Should the auto rotate stop on hover (and not continue after hover) 
     equalHeight : true, // Should every item have equal heights 

     navPosition : 'above', // above, below, both, custom (must provide custom selector for placement) 
     navPositionCustom : '', // selector of custom element 

     navPrev : false, // Toggle "previous" button 
     navNext : false, // Toggle "next" button 
     navNum : false, // Toggle numbered navigation 
     navText : false, // Toggle navigation description (e.g. display current item # and total item #) 

     navPrevText : 'Prev', // Text for the "previous" button 
     navNextText : 'Next', // Text for the "next" button 
     navTextContent : '@a/@b' // @a will be replaced with current and @b with total 

    }; 
})(jQuery); 

여기에 함께 작동하는 HTML의 매우 간단한 예입니다 ...

가 더 이상 예상보다 조금했다

<div class="quovolver"> 

<div>1</div> 

<div>2</div> 

<div>3</div> 

<div>4</div> 

</div> 

Answer 1

죄송합니다;)

이 기능이 작동하는지 알려주세요.

다음으로 현재 Quovolver 코드를 대체 할 수있다 : 중복 된 div를 해결하려면, 내가 그 외에, 위의 코드에있는 작은 조정을 한

$(document).ready(function() { 
    var $items = $('.quovolver .quote'); 
    var quovolver = $('.quovolver'); 
    var newItems = []; 

    $.each($items, function(i, quote) { 
     var $copy = $(quote); 
     newItems.push($copy); 
     $copy.remove(); 
    }); 

    var random; 
    var chosenRandom = []; 
    for (var i = 0; i < newItems.length - 1; i++) { 
     random = Math.floor(Math.random() * newItems.length); 
     while ($.inArray(random, chosenRandom) != -1) { 
      random = Math.floor(Math.random() * newItems.length); 
     } 
     chosenRandom.push(random); 
     quovolver.append(newItems[random]); 
    } 
    $('div.quovolver').quovolver({autoPlaySpeed : 6000}); 
});​ 

편집 CSS 클래스 testimonial_widget을 다음과 같이 바꿀 수 있습니까 : overflow:hidden? 그것은 또한 그것 위에 기어 다니는 div를 숨기는 것을 도울 것입니다. quovolver에 개체를 전달할 때

가 두 번째로 각 사업부의 길이가 위의 스크립트에서 변경 될 수 있습니다, 다음과 같은 수정 :

autoPlaySpeed : 6000에 그러나 당신이 기다리고 싶지 많은 (초 * 1000). 이 도움이

희망)