try
<!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" xml:lang="en" lang="en">
<head>
<title></title>
<style type="text/css">
/*<![CDATA[*/
#studio {
position:relative;width:500px;height:180px;text-Align:center;border:solid red 1px;
}
/*]]>*/
</style>
</head>
<body>
<input type="button" name="" value="Next" onclick="zxcColorFader.Next('studio',1);" />
<input type="button" name="" value="Back" onclick="zxcColorFader.Next('studio',-1);" />
<input type="button" name="" value="GoTo 0" onclick="zxcColorFader.GoTo('studio',0);" />
<input type="button" name="" value="GoTo 1" onclick="zxcColorFader.GoTo('studio',1);" />
<input type="button" name="" value="GoTo 2" onclick="zxcColorFader.GoTo('studio',2);" />
<br />
<div id="studio" onmouseover="zxcColorFader.Pause('studio');" onmouseout="zxcColorFader.Auto('studio');" >
<div class="testimonial">
<blockquote>
<div class="content"><h3>Katherine Ryan is certainly one to watch. She is innovative, original and hugely charming. Her material never crosses into lazy cliche’s but instead provides an insightful, savvy and most importantly massively entertaining evening of comedy.</h3></div>
<div class="author">Clare Boswell</div>
<small><div class="extra">The Public Reviews</div></small></blockquote>
</div>
<div class="testimonial">
<blockquote>
<div class="content"><h3>A performer with a distinctive comic voice</h3></div>
<div class="author">The Telegraph</div>
<small><div class="extra">August 2012</div></small></blockquote>
</div>
<div class="testimonial">
<div class="content"><h3>Panel 2</h3></div>
</div>
</div>
<script type="text/javascript">
/*<![CDATA[*/
// Color Fader (11-August-2014)
// by Vic Phillips - http://www.vicsjavascripts.org/
var zxcColorFader={
GoTo:function(id,n){
var o=this['zxc'+id];
if (o){
this.Pause(id);
if (o.a[n]&&n!=o.n){
this.rotate(o,n);
}
}
},
Next:function(id,ud){
var o=this['zxc'+id],ud=typeof(ud)=='number'&&ud<0?-1:1;
if (o){
o.ud=ud;
this.rotate(o,o.n+ud);
}
},
Auto:function(id,ms){
var o=this['zxc'+id];
if (o){
o.to=setTimeout(function(){ zxcColorFader.rotate(o,true); },ms||200);
}
},
Pause:function(id){
var o=this['zxc'+id];
if (o){
clearTimeout(o.to);
o.auto=false;
}
},
init:function(o){
var id=o.ParentID,sc=this.hex(o.StartColor),ec=this.hex(o.EndColor),ms=o.Animate,h=o.AutoHold,s=o.AutoStart,p=document.getElementById(id),m=!sc||!ec;
if (p){
var clds=p.childNodes,c,z0=0;
o.id=id;
o.sc=m?[100]:this.rgb(sc);
o.ec=m?[0]:this.rgb(ec);
o.m=m?1:3;
o.a=[];
for (;z0<clds.length;z0++){
c=clds[z0];
if (c.nodeType==1){
c.style.position='absolute';
c.style.left=(p.offsetWidth-c.offsetWidth)/2+'px';
c.style.top=(p.offsetHeight-c.offsetHeight)/2+'px';
c.style.visibility=o.a.length>0?'hidden':'visible';
o.a.push([c]);
}
}
o.l=o.a.length-1;
o.n=0;
o.ud=1;
o.ms=typeof(ms)=='number'&&ms>20?ms:1000;
o.h=typeof(h)=='number'&&h>20?h:o.ms*4;
this['zxc'+id]=o;
typeof(s)=='number'&&s>=0?this.Auto(id,s):null;
}
},
rotate:function(o,a){
this.Pause(o.id);
o.auto=a===true;
var n=o.auto?o.n+o.ud:a;
n=n<0?o.l:n>o.l?0:n;
this.animate(o,o.a[o.n],o.sc,o.ec,new Date(),o.ms);
o.n=n;
},
animate:function(o,a,f,t,srt,mS){
clearTimeout(a[4]);
var oop=this,ms=new Date()-srt,n=[];
for (var z0=0;z0<o.m;z0++){
n[z0]=(t[z0]-f[z0])/mS*ms+f[z0];
n[z0]=isFinite(n[z0])?n[z0]:t[z0];
}
o.m==3?this.c(a[0],n):this.opc(a[0],n[0]);
if (ms<mS){
a[4]=setTimeout(function(){ oop.animate(o,a,f,t,srt,mS); },10);
}
else {
a[0].style.visibility='hidden';
a=o.a[o.n][0];
o.m==3?oop.c(a,o.sc):oop.opc(a,o.sc);
a.style.visibility='visible';
o.auto?this.Auto(o.id,o.h):null;
}
},
c:function(o,c){
o.style.color='rgb('+c+')';
},
opc:function(o,n){
o.style.filter='alpha(opacity='+n+')';
o.style.opacity=o.style.MozOpacity=o.style.WebkitOpacity=o.style.KhtmlOpacity=n/100-.001;
},
hex:function(h){
return typeof(h)=='string'&&h.length==7?h:false;
},
rgb:function(h){
return [parseInt(h.substring(1,3),16),parseInt(h.substring(3,5),16),parseInt(h.substring(5,7),16)];
}
}
zxcColorFader.init({
ParentID:'studio', // the unique ID name of the parent DIV. (string)
StartColor:'#000000', //(optional) the HEX value of the start color. (hex string, default = fade)
EndColor:'#FFFFFF', //(optional) the HEX value of the end color. (hex string, default = fade)
Animate:1000, //(optional) the animation duration in millsec. (number, default = 1000)
AutoHold:2000, //(optional) the auto rotation 'hold' delay in millsec. (number, default = Animate*4)
AutoStart:2000 //(optional) the auto rotation 'start' delay in millsec. (number, default = no Auto Start)
})
/*]]>*/
</script>
</body>
</html>