3

我终于让美妙的“quovolver”在我的网站上工作，我的推荐信都在我的侧边栏中以一种可爱的方式旋转......

但是，我希望它们不是一直以相同的顺序运行（quovolver 的脚本按照它们在 html 中的顺序循环它们...），而是由脚本随机调用它们...

这可能吗？？

这是脚本：

/**
 * 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>
4

1 回答 1

1

抱歉，花了比预期更长的时间；）

让我知道这是否适合您。

您可以使用以下代码替换您当前的 Quovolver 代码：

$(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});
});​

编辑

为了修复重叠的 div，我在上面的代码中做了一个小的调整，除此之外，你能改变 CSS 类testimonial_widget来包含：overflow:hidden ？这也将有助于隐藏爬过它的 div。

其次可以在上面的脚本中更改每个div的长度，当将对象传递给quovolver时，修改如下：

autoPlaySpeed : 6000无论您希望它等待多少（秒 * 1000）。

希望这可以帮助 ;）

于 2012-11-25T22:05:06.450 回答