Ну, если нет готового, я закладываю "краеугольный камень":
Quote
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script type="text/javascript" src="http://s2.ucoz.net/src/jquery-1.6.1.js"></script>
<script type="text/javascript" src="http://s2.ucoz.net/src/uwnd.js?2"></script>
<style type="text/css">
#rand_box{position:relative;width:1060px;height:316px;overflow:hidden; margin:0;}
img#bgImg1,img#bgImg2{display:block;position:fixed;top:0;left:0;width:1060px;height:316px;z-index:-1;}
</style>
</head>
<body>
<div id="dm1">
<div id="rand_box">
<!--Start()-->
<script type="text/javascript">
function getElmHeight(el){var e=el;return (e.scrollHeight>e.offsetHeight)?e.scrollHeight:e.offsetHeight;}
function showImg(){
var imgBg=new Array()
imgBg[0]='http://albaraka.ru/wp-content/uploads/2012/07/1.jpg';
imgBg[1]='http://albaraka.ru/wp-content/uploads/2012/07/2.jpg';
var i=(i==undefined||i>imgBg.length-1)?0:i;
var u=imgBg[i],c=new Image();c.src=u; obj=$('dm1'),h=getElmHeight(document.getElementById('rand_box'));
if(!document.getElementById('bgImg1')){
obj.append('<img id="bgImg1" style="position:absolute;z-index:-1;height:'+h+'px;" src="/_theme1/_st/img/spacer.gif" alt="" /><img id="bgImg2" style="position:absolute;z-index:-1;height:'+h+'px;" src="/_theme1/_st/img/spacer.gif" alt="" />');
$('#bgImg1').css('background',obj.css('background'));
};
if(obj.css('background')!='transparent'){
obj.css('background','transparent');
};
var img1=$('#bgImg1').css('height',h+'px'),img2=$('#bgImg2').css('height',h+'px');
var changeBg=function(){
if(img1.css('opacity')==0){
img2.animate({opacity:'0'},1200);
img1.css('background','url('+u+') repeat 0% 0%').animate({opacity:'1'},1000);
}else{
img1.animate({opacity:'0'},1200);
img2.css('background','url('+u+') repeat 0% 0%').animate({opacity:'1'},1000);
}};
if(!c.complete){c.onload=function(){document.getElementById('#bgImg1').style.background='url('+u+') repeat 0% 0%';show();}
}else{document.getElementById('#bgImg1').style.background='url('+u+') repeat 0% 0%';show();}
};showImg(0)',5000);
};
$(document).ready(function(){showImg();});
</script>
<!--//End()-->
<img id="bgImg1" style="position:absolute;z-index:-1;" src="/_theme1/_st/img/spacer.gif" alt="" />
<img id="bgImg2" style="position:absolute;z-index:-1;" src="/_theme1/_st/img/spacer.gif" alt="" />
</div>
</body>
</html>
Попытка скомпилировать что есть. Пропало фоновое изображение, правда. Может, вам видны какие-то какие-то ошибки и пр.?Добавлено (28.07.2012, 17:25)
---------------------------------------------
Я, видимо, не правльно объяснила проблему: скрипт смены фона начинает работать только после обновления страницы, то есть анимация начинается после обновления страницы (а не то, что фонновое изображение появляется другое после обновления).
Посмотрите:
http://albaraka.ru/
шапка статичная, нажмёте F5, она начнёт "играть".
Добавлено (28.07.2012, 19:28)
---------------------------------------------
Как же исправить это глюк?