<!DOCTYPE html>
<html>
<head>
<style>
ul.indexbg { background:#fff;position:absolute; left:0; top:0; width:100%; height:57px; list-style:none; margin:0px; padding:0px; z-index:1;
}
ul.indexbg li{cursor:pointer;display:none;width:100%; height:57px; }
ul.indexbg li#bg01 { background:#fff url(http://t1.gstatic.com/images?q=tbn:ANd9GcSYs5-YBL3DoG4ilymKaXfontTUNQLRteBK2iLI-jKBQks2wyP2Dw) 150% 100% no-repeat}
ul.indexbg li#bg02 {background:#fff url(http://t1.gstatic.com/images?q=tbn:ANd9GcTz058O2V0_6Yvt-HJ3MfuNg1HwJ6wmiFW9JS6tKXC7mx5mDKlK) 150% 100% no-repeat}
ul.indexbg li#bg03 {background:#fff url(http://t3.gstatic.com/images?q=tbn:ANd9GcTQmAEFHfxewnJrL5I2hop44CsH4Nw2s8Xo1eSnlnESLo9rb0jd) 150% 100% no-repeat}
ul.indexbg li.active{ display:block; z-index:2; }
ul.indexbg li.active2{ z-index:3; }
/* начальный фон */
#background {
left:0; top:0;
position:fixed;
width:100%;
height:100%;
background:#fff url(http://t1.gstatic.com/images?q=tbn:ANd9GcSYs5-YBL3DoG4ilymKaXfontTUNQLRteBK2iLI-jKBQks2wyP2Dw) 50% 0;
}
body {
width:100%;
min-height:100%;
}
</style>
<script type="text/javascript" src="http://yandex.st/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("ul.indexbg li").click(function(){
var ls=$("ul.indexbg li")
ls.removeClass('active').hide();
next = ls.index(this)+1;
if(next>=ls.length)next=0;
var background=ls.eq(next).css("background-image");
$('img[id="background"]').not(':first').remove();
var oldFon=$('#background')
var newFon=oldFon.clone();
newFon.css({"background-image":background,opacity:0});
newFon.insertAfter(oldFon);
ls.eq(next).addClass('active').show()
newFon.animate({opacity:1},800);
oldFon.animate({opacity:0},800, "linear", function(){oldFon.remove();} );
})
});
</script>
</head>
<body><img id="background" src="http://forum.mybb.ru/i/blank.gif">
<ul class="indexbg">
<li id="bg01" class="active">01</li>
<li class="" id="bg02">02</li>
<li class="" id="bg03">03</li>
</ul>
</body>
</html>