Ciao a tutti, premetto che non sono molto preparato su javascript, vorrei sapere se è possibile trasformare il seguente codice con effetto ciclico di dissolvenza su dei box, in un effetto con comando manuale, dato da un bottone inserito all'interno di ciascuno dei box.
Spero di essere nella sezione giusta! Grazie!

codice:
<!doctype html><html>
<head>
<meta charset="utf-8">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script type="text/javascript">
(function($) {
    $.fn.rotator = function(options) {
        options = $.extend({
            blocks: '.fade-block',
            speed: 1000
        }, options);
        var setZIndex = function(element) {
                var index = $(options.blocks, element).length;
                $(options.blocks, element).each(function() {
                    index--;
                    $(this).css('zIndex', index);
                });
            };
        var rotate = function(element) {
                var blocks = $(options.blocks, element),
                    len = blocks.length,
                    index = -1;
                blocks.fadeIn(options.speed);
                var timer = setInterval(function() {
                    index++;
                    var block = blocks.eq(index);
                    if (index == len) {
                        clearInterval(timer);
                        rotate(element);
                    }
                    if (block.index() != (len - 1)) {
                        block.fadeOut(options.speed);
                    }
                }, options.speed);
            };
        return this.each(function() {
            var elem = $(this);
            setZIndex(elem);
            rotate(elem);
        });
    };
})(jQuery);
$(document).ready(function() {
    $('div.fade-blocks-wrapper').rotator({
        speed: 2500
    });
});
</script>
<style>
.fade-blocks-wrapper {
    width: 560px;
    height: 180px;
    margin: 2em auto;
    position: relative;
    overflow: hidden;
}
.fade-block {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}
.fade-block .block {
    width: 250px;
    height: 100%;
    margin: 0 10px;
    background: #eee;
    float: left;
    line-height: 180px;
    text-align: center;
    font-size: 2em;
}
.fade-block:nth-child(2) .block {
    background: #666;
    color: #fff;
}
.fade-block:nth-child(3) .block {
    background: #ffc;
}
</style>
</head>
<body>
<div class="fade-blocks-wrapper">
    <div class="fade-block">
        <div class="block">1</div>
    </div>
    <div class="fade-block">
        <div class="block">2</div>
    </div>
</div>
</body>
</html>