Forsiderotasjon som sett på ekornes.no (nettstedet er senere flyttet, men utseende og funksjonalitet er bevart).

ekornes-flip-rotation.js

if(typeof jQuery !== 'undefined')
{
    function FlipRotation(args)
    {
        if($(args.selector.wrap).length)
        {
            this.initialize(args);
        }
    }
    
    FlipRotation.prototype = {
        initialize: function(args)
        {
            var self = this;
            this.args = args;
            
            $(this.args.selector.wrap).data('anim', false);
            
            if(this.args.rotate.auto)
            {
                this.autoRotate();
            }
            
            if(this.args.interaction.switchOnMouseOver)
            {
                this.enableMouseOverSwitching();
            }
        },
        
        fade: function(showItemAtIndex)
        {
            var self = this;
            var $wrap = $(this.args.selector.wrap);
            var $items = $wrap.find(this.args.selector.item);
            
            var fromItem = $items.filter('.show');
            var fromItemIndex = fromItem.index();
            
            var toItemIndex = showItemAtIndex;
            if(typeof showItemAtIndex === 'undefined')
            {
                toItemIndex = fromItemIndex + 1;
            }
            
            if(toItemIndex > (this.getNumberOfItems() - 1))
            {
                toItemIndex = 0;
            }
            else if(toItemIndex < 0)
            {
                toItemIndex = (this.getNumberOfItems() - 1);
            }
            
            var toItem = $items.eq(toItemIndex);
            
            if(!toItem.is(':visible') && !$wrap.data('anim'))
            {
                $wrap.data('anim', true);
                
                this.setActiveMenuItem(fromItemIndex, toItemIndex);
                
                fromItem
                    .animate(
                    {
                        opacity: 0
                    },
                    {
                        duration: 300,
                        complete: function()
                        {
                            $(this)
                                .removeClass('show')
                                .removeAttr('style');
                        }
                    });
                
                toItem
                    .css(
                    {
                        display: 'block',
                        opacity: 0
                    })
                    .animate(
                    {
                        opacity: 1
                    },
                    {
                        duration: 150,
                        complete: function()
                        {
                            $(this)
                                .addClass('show')
                                .removeAttr('style');
                            
                            $wrap.data('anim', false);
                        }
                    });
            }
        },
        
        setActiveMenuItem: function(fromItemIndex, toItemIndex)
        {
            var self = this;
            var $menuItems = $(this.args.selector.wrap).find('.flips').find('li');
            
            
            // BACKGROUND ANIMATIONS
            
            $menuItems.eq(toItemIndex).siblings().find('.bg-active')
                .animate(
                {
                    opacity: 0
                },
                {
                    duration: 200,
                    complete: function()
                    {
                        $(this).siblings('.bg-normal')
                            .animate(
                            {
                                height: '123px',
                                top: '60px'
                            },
                            {
                                duration: 200,
                                complete: function()
                                {
                                    $(this).closest('li')
                                        .removeClass('active');
                                }
                            });
                    }
                });
            
            $menuItems.eq(toItemIndex).find('.bg-normal')
                .animate(
                {
                    height: '117px',
                    top: '70px'
                },
                {
                    duration: 200,
                    complete: function()
                    {
                        $(this).siblings('.bg-active')
                            .css(
                            {
                                display: 'block',
                                opacity: 0
                            })
                            .animate(
                            {
                                opacity: 1
                            },
                            {
                                duration: 200,
                                complete: function()
                                {
                                    $(this).closest('li')
                                        .addClass('active');
                                }
                            });
                    }
                });
            
            
            // CALL TO ACTION ANIMATIONS
            
            if($.browser.msie)
            {
                $menuItems.eq(toItemIndex).siblings().find('.cta')
                    .css('display', 'none');
            }
            else
            {
                $menuItems.eq(toItemIndex).siblings().find('.cta')
                    .animate(
                    {
                        opacity: 0
                    },
                    {
                        duration: 350
                    });
            }
            
            if($.browser.msie)
            {
                $menuItems.eq(toItemIndex).find('.cta')
                    .css('display', 'block');
            }
            else
            {
                $menuItems.eq(toItemIndex).find('.cta')
                    .css(
                    {
                        display: 'block',
                        opacity: 0
                    })
                    .animate(
                    {
                        opacity: 1
                    },
                    {
                        duration: 350
                    });
            }
            
            // CONTENT ANIMATIONS
            
            $menuItems.eq(toItemIndex).siblings().find('.img')
                .delay(200)
                .animate(
                {
                    paddingTop: '15px'
                },
                {
                    duration: 200
                });
            
            $menuItems.eq(toItemIndex).find('.img')
                .animate(
                {
                    paddingTop: '18px'
                },
                {
                    duration: 200
                });
        },
        
        enableMouseOverSwitching: function()
        {
            var self = this;
            var $menuItems = $(this.args.selector.wrap).find('.flips').find('li');
            
            $menuItems
                .bind('mouseenter.fade', function(e)
                {
                    self.fade($(this).index());
                });
        },
        
        autoRotate: function()
        {
            var self = this;
            var $wrap = $(this.args.selector.wrap);
            
            this.timers.start('autoRotation', this.args.rotate.interval, function()
            {
                self.fade();
            });
            
            if(this.args.interaction.pauseAutoRotationOnMouseOver)
            {
                $wrap
                    .bind('mouseleave.rotate', function()
                    {
                        self.restartAutoRotation();
                    })
                    .bind('mouseenter.rotate', function()
                    {
                        self.timers.stop('autoRotation');
                    });
            }
        },
        
        stopAutoRotation: function()
        {
            if(this.args.rotate.auto && this.args.interaction.stopAutoRotationOnClick)
            {
                var $wrap = $(this.args.selector.wrap);
                
                this.timers.stop('autoRotation');
                $wrap.unbind('mouseleave.rotate');
            }
        },
        
        restartAutoRotation: function()
        {
            var self = this;
            this.timers.stop('autoRotation');
            this.timers.start('autoRotation', this.args.rotate.interval, function()
            {
                self.fade();
            });  
        },
        
        getNumberOfItems: function()
        {
            return $(this.args.selector.wrap).find(this.args.selector.item).length;
        },
            
        timers: {
            map: {},
            
            start: function(name, time, callback)
            {
                var id = setInterval(callback, time);
                this.map[name] = id;
            },
            
            stop: function(name)
            {
                if(this.map[name])
                {
                    clearInterval(this.map[name]);
                }
            }
        }
    };
    
    $(function()
    {
        var EKORNESFlipRotation = new FlipRotation(
        {
            selector:
            {
                wrap: '.flip-rotation',
                items: '.images',
                item: '.image-wrap'
            },
            rotate:
            {
                auto: true,
                interval: 7500
            },
            interaction:
            {
                pauseAutoRotationOnMouseOver: true,
                switchOnMouseOver: true,
                stopAutoRotationOnClick: true
            },
            speed: 333
        });
    });
}