Background Slideshow

HTML

<div style="height: 395px !important; margin: 0; padding: 0;">
	<div id="bg">
		<a href=""><img alt="Pyramifern" src="http://www.maoptp.co.uk/pyramifern.jpg" /></a> <a href=""><img alt="Pyramifern at sunrise" src="http://www.maoptp.co.uk/pyramifern_at_sunrise.jpg" /></a> <a href=""><img alt="Pyramifern at sunset" src="http://www.maoptp.co.uk/pyramifern_at_sunset.jpg" /></a><a href=""><img alt="Pyramifern at night" src="http://www.maoptp.co.uk/pyramifern_at_night.jpg" /></a><a href=""><img alt="Nocturnal flowers" src="http://www.maoptp.co.uk/nocturnal_flowers.jpg" /></a>
    <img alt="Nocturnal flowers" style="display: none;" src="http://www.maoptp.co.uk/nocturnal_flowers.jpg" /></a>
    </div>
</div>

<p>hola pepe</p>

CSS

p {
	font-family:Trajan Pro, serif;
	font-size:medium;
	font-weight:normal;
	color:black;
}
h1 {
	font-family:Trajan Pro, serif;
	font-weight:bold;
	font-size:x-large;
	color:white;
	text-align:center;
   }


#bg {
    position:absolute;
    z-Index:0;
/*    top:135px;*/
}

#bg IMG{
    position:absolute;
    top:0px;
    opacity: -0.001;
}

JavaScript

function zxcAnimate(mde,obj,srt){
 this.to=null;
 this.obj=typeof(obj)=='object'?obj:document.getElementById(obj);
 this.mde=mde.replace(/\W/g,'');
 this.data=[srt||0];
 return this;
}

zxcAnimate.prototype.animate=function(srt,fin,ms,scale,c){
 clearTimeout(this.to);
 this.time=ms||this.time||0;
 this.neg=srt<0||fin<0;
 this.data=[srt,srt,fin];
 this.mS=this.time*(!scale?1:Math.abs((fin-srt)/(scale[1]-scale[0])));
 this.c=typeof(c)=='string'?c.charAt(0).toLowerCase():this.c?this.c:'';
 this.inc=Math.PI/(2*this.mS);
 this.srttime=new Date().getTime();
 this.cng();
}

zxcAnimate.prototype.cng=function(){
 var oop=this,ms=new Date().getTime()-this.srttime;
 this.data[0]=(this.c=='s')?(this.data[2]-this.data[1])*Math.sin(this.inc*ms)+this.data[1]:(this.c=='c')?this.data[2]-(this.data[2]-this.data[1])*Math.cos(this.inc*ms):(this.data[2]-this.data[1])/this.mS*ms+this.data[1];
 this.apply();
 if (ms<this.mS) this.to=setTimeout(function(){oop.cng()},10);
 else {
  this.data[0]=this.data[2];
  this.apply();
  if (this.Complete) this.Complete(this);
 }
}

zxcAnimate.prototype.apply=function(){
 if (isFinite(this.data[0])){
  if (this.data[0]<0&&!this.neg) this.data[0]=0;
  if (this.mde!='opacity') this.obj.style[this.mde]=Math.floor(this.data[0])+'px';
  else zxcOpacity(this.obj,this.data[0]);
 }
}

function zxcOpacity(obj,opc){
 if (opc<0||opc>100) return;
 obj.style.filter='alpha(opacity='+opc+')';
 obj.style.opacity=obj.style.MozOpacity=obj.style.KhtmlOpacity=opc/100-.001;
}

function BGFade(o){
 var p=document.getElementById(o.ID)
 if (p){
  var bgs=p.getElementsByTagName('IMG');
  this.bgs=[];
  for (var z0=0;z0<bgs.length;z0++){
   this.bgs[z0]=new zxcAnimate('opacity',bgs[z0]);
  }
  this.nu=z0-1;
  this.ms=o.Duration||1000;
  this.hold=o.Hold||this.ms*2;
  if(this.nu>0){
   this.Rotate();
  }
 }
}

BGFade.prototype.Rotate=function(){
 this.bgs[this.nu].obj.style.zIndex='0';
 this.bgs[this.nu].animate(100,0,this.ms);
 this.nu=++this.nu%this.bgs.length;
...