Kód: Vybrať všetko

<script type="text/javascript">
            
            $(window).load(function(){                
                
                function bgChanger (element1, element2) {
                    this.element1 = element1;
                    this.element2 = element2;
                    this.timer;
                }
                
                bgChanger.prototype = {
                    init: function(){
                        var self = this;
                        $(self.element1+" > div").css('display', 'block');
                        if (typeof self.element2 !== "undefined" && self.element2) {
                            var pagination = $("<ul></ul>");                        

                            if ($(self.element1).children().length > 0) {
                                $(self.element1+" > div").each(function(index, val){
                                    pagination.append('<li '+($(this).hasClass('active') ? 'class="active"' : '')+'><a href="#">'+(index+1)+'</a></li>');
                                });
                            }

                            if ($(self.element2).length > 0){
                                $(self.element2).html(pagination);
                                
                                $(self.element2).find("a").bind('click', function(){
                                    var index = $(this).html();
                                    self.set(index);
                                    
                                    $(this).parent().siblings().removeClass('active');
                                    $(this).parent().addClass('active');
                                    
                                    return false;
                                });
                            }
                        }
                    },
                    start: function () {
                        var self = this;                        
                        self.stop();
                                                   
                        self.timer = setInterval(function(){
                            var $active = $(self.element1).find('.active');
                            var $next = ($active.next().length > 0) ? $active.next() : $(self.element1).find('div:first');

                            var index = ($next.index()+1);

                            if (typeof self.element2 !== "undefined" && self.element2) {
                                $(self.element2+' li').removeClass('active');
                                $(self.element2+' li:nth-child('+index+')').addClass('active');
                            }

                            $next.css('z-index', 2);
                            $active.fadeOut(1500, function(){
                                $active.css('z-index', 1).show().removeClass('active');
                                $next.css('z-index', 3).addClass('active');
                            });
                        }, 7000);
                    },
                    set: function(index){
                        var self = this; 
                        self.stop();
                        
                        var $active = $(self.element1).find('.active');
                        var $next = $(self.element1+' :nth-child('+index+')');

                        $next.css('z-index', 2);
                        $active.fadeOut(1500, function(){
                            $active.css('z-index', 1).show().removeClass('active');
                            $next.css('z-index', 3).addClass('active');
                        });
                        
                        self.start();
                    },
                    stop: function(){
                        var self = this;
                        clearTimeout(self.timer);
                    }
                };
                
                var changer  = new bgChanger("#background", "#bg_pagination");
                
                changer.init();
                changer.start();
            });
            
        </script>

Kód: Vybrať všetko

<div id="background" >
                <div style="background-image: url('/images/content/bg_pic1.jpg');" class="active"></div>
                <div style="background-image: url('/images/content/bg_pic2.jpg');"></div>
                <div style="background-image: url('/images/content/bg_pic3.jpg');"></div>
            </div>
<div id="bg_pagination"></div>

Kód: Vybrať všetko

html, body{ width: 100%; height: 100%;}

#background{ padding: 0; margin: 0; width: 100%; height: 100%; position: fixed; top: 0; left: 0; }
#background > div:not(.active){ display: none; }            
#background > div{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 1; background-repeat: no-repeat; background-attachment: fixed; background-position: left center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; }
#background > div.active{ z-index: 3; }