Code:
<!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[*/
#tst {
position:relative;left:100px;top:100px;width:800px;height:360px;border:solid red 1px;
}
.frames {
position:absolute;left:0px;top:0px;width:600px;height:360px;
}
.frame {
width:600px;height:360px;
}
.tabs {
position:relative;z-Index:4;left:598px;top:0px;width:200px;
}
.tab {
position:relative;left:0px;top:0px;width:200px;height:82px;background-Color:#FFFFCC;border:solid red 1px;margin-Top:5px;
}
.tabactive {
left:-5px;background-Color:#FFCC66;
}
/*]]>*/
</style>
<script language="JavaScript" src="http://www.vicsjavascripts.org.uk/Animate/Animate.js" type="text/javascript">
// featured on http://www.vicsjavascripts.org.uk/Animate/Animate.htm
</script>
</head>
<body>
<div id="tst" >
<div class="frames" >
<div class="frame" >
<img src="http://www.myeloma.org.uk/files/7712/8627/0482/maureen%20lipman%20colour%20-%20small%20half.png" />
</div>
<div class="frame" >
<img src="http://www.myeloma.org.uk/files/8912/8627/0685/family.png" />
</div>
<div class="frame" >
<img src="http://www.myeloma.org.uk/files/9112/8575/1934/supportGroup%20hero.png" />
</div>
<div class="frame" >
<img src="http://www.myeloma.org.uk/files/2112/9665/8721/homeHeroFundraising.png" />
</div>
</div>
<div class="tabs" >
<div class="tab" >
</div>
<div class="tab" >
</div>
<div class="tab" >
</div>
<div class="tab" >
</div>
</div>
</div>
<script type="text/javascript">
/*<![CDATA[*/
// Tab Slide Show (14-Febuary-2011) DRAFT
// by Vic Phillips http://www.vicsjavascripts.org.uk
// ****** Functional Code(4.06K) - NO NEED to Change.
function zxcTabSlideShow(o){
var oop=this,obj=document.getElementById(o.ID),frames=this.bycls(o.FrameClassName,obj),fn=frames.length,cls=o.TabsClassName,tabs=this.bycls(cls,obj),z0=0,active=typeof(o.ActiveClassName)=='string'?o.ActiveClassName:'',auto=o.AutoRotateHold,atab=typeof(o.AnimateTabs)=='object'&&o.AnimateTabs.constructor==Array?o.AnimateTabs:false,lft,tmde,nu=typeof(o.StartPanel)=='number'&&o.StartPanel<fn?o.StartPanel:0,days=typeof(o.DaysPersistence)=='number'?o.DaysPersistence:false,m=typeof(o.Mode)=='string'?o.Mode.charAt(0).toUpperCase():'O',fmde=m=='O'?'opacity':m=='L'||m=='R'?'left':'top',mm=[0,m=='O'?100:frames[0]['offset'+(m=='L'||m=='R'?'Width':'Height')]*(m=='L'||m=='T'?1:-1),m=='O'?100:0];
if (days&&this.cookie){
this.nme=o.ID+'=';
nu=this.cookie(this.nme)||nu;
}
if (m!='O'){
frames[0].parentNode.style.overflow='hidden';
}
this.ary=[];
for (var z0=0;z0<fn;z0++){
frames[z0].style.position='absolute';
frames[z0].style.top='0px';
frames[z0].style.zIndex=z0!=nu?'0':'2';
this.ary[z0]=[new zxcAnimate(fmde,frames[z0],z0!=nu?0:100),false,false];
if (m=='O'){
zxcOpacity(frames[z0],z0!=nu?0:100);
}
else {
frames[z0].style[fmde]=(z0!=nu?-mm[1]:0)+'px';
this.ary[z0][0].data[0]=(z0!=nu?-mm[1]:0);
}
if (tabs[z0]){
this.ary[z0][1]=[tabs[z0],cls,cls+' '+active];
if (atab&&typeof(atab[0])=='number'){
tmde=typeof(atab[2])=='string'&&atab[2].charAt(0).toLowerCase()=='t'?'top':'left';
lft=tabs[z0]['offset'+(tmde=='left'?'Left':'Top')];
this.ary[z0][2]=[atab?new zxcAnimate(tmde,tabs[z0],z0!=nu?lft:lft+atab):false,lft,lft+atab[0]];
tabs[z0].style[tmde]=lft+(z0!=nu?0:atab[0])+'px';
}
tabs[z0].className=this.ary[z0][1][z0!=nu?1:2];
this.addevt(tabs[z0],'mouseup','GoTo',z0);
}
}
this.days=days;
this.mde=fmde;
this.lst=false;
this.mm=mm;
this.cnt=nu;
this.to=null;
this.ms=typeof(o.AnimationSpeed)=='number'?o.AnimationSpeed:1000;
if (atab){
this.sms=typeof(atab[1])=='number'?atab[1]:this.ms/4;
}
if (typeof(auto)=='number'){
this.hold=auto+this.ms;
this.addevt(obj,'mouseover','Pause');
this.addevt(obj,'mouseout','Auto',true);
this.to=setTimeout(function(){ oop.Auto(); },this.hold);
}
}
zxcTabSlideShow.prototype={
GoTo:function(nu){
this.Pause();
var ary=this.ary[this.cnt],z0=0;
if (this.mde=='opacity'){
ary[0].animate(ary[0].data[0],0,this.ms,this.mm);
}
else if (this.lst){
this.lst[0].obj.style.zIndex='0';
this.lst[0].data[0]=-this.mm[1];
}
this.lst=ary
ary[0].obj.style.zIndex='1';
if (ary[1]){
ary[1][0].className=ary[1][1];
}
if (ary[2]){
ary[2][0].animate(ary[2][0].data[0],ary[2][1],this.sms);
}
this.cnt=nu;
ary=this.ary[this.cnt];
ary[0].animate(ary[0].data[0],this.mm[2],this.ms,this.mm);
ary[0].obj.style.zIndex='2';
if (ary[1]){
ary[1][0].className=ary[1][2];
}
if (ary[2]){
ary[2][0].animate(ary[2][0].data[0],ary[2][2],this.sms);
}
if (this.days&&this.cookie){
document.cookie=this.nme+nu+';expires='+(new Date(new Date().getTime()+this.days*86400000).toGMTString())+';path=/';
}
},
Auto:function(srt){
var oop=this;
this.to=setTimeout(function(){ oop.auto(); },srt?this.hold:200);
},
Pause:function(){
clearTimeout(this.to);
},
auto:function(){
var oop=this;nu=this.cnt;
nu=++nu%this.ary.length;
this.GoTo(nu);
this.to=setTimeout(function(){ oop.Auto(); },this.hold);
},
bycls:function(nme,el,tag){
for (var tag=tag||'*',reg=new RegExp('\\b'+nme+'\\b'),els=el.getElementsByTagName(tag),ary=[],z0=0; z0<els.length;z0++){
if(reg.test(els[z0].className)) ary.push(els[z0]);
}
return ary;
},
addevt:function(o,t,f,p){
var oop=this;
if (o.addEventListener) o.addEventListener(t,function(e){ return oop[f](p,e);}, false);
else if (o.attachEvent) o.attachEvent('on'+t,function(e){ return oop[f](p,e); });
},
cookie:function(nme){
var re=new RegExp(nme+'[^;]+','i');
if (document.cookie.match(re)){
return document.cookie.match(re)[0].split("=")[1];
}
return null
}
}
new zxcTabSlideShow({
ID:'tst', // the unique ID name of the Tab Slide Show parent node. (string)
FrameClassName:'frame', // the common class name of the Tab Slide Show frames. (string)
TabsClassName:'tab', // the common class name of the Tab Slide Show tabs. (string)
Mode:'opacity', //(optional) the type of execution(see Note 1). (string, default = 'opacity')
ActiveClassName:'tabactive', //(optional) the 'active' class name to be applied to the current tab. (string, default = no 'active' class name)
StartPanel:1, //(optional) the initial Tab Slide Show frame index number. (number, default = 0)
AnimationSpeed:1000, //(optional) the duration of the fade effect in milli seconds. (number, default = 1000)
AnimateTabs:[-5,100,'left'], //(optional) an array defining the tab animation options. (array, default = no tab animation)
// field 0 = the animation distance in 'px'. (number)
// field 1 = (optional)the animation speed in milli seconds'. (number, default = AnimationSpeed/4)
// field 2 = (optional)the animation type, 'left' or 'top', (string, default = 'left')
AutoRotateHold:2000, //(optional) the auto rotation 'hold'delay in milli seconds. (number, default = no auto rotation)
DaysPersistence:1 //(optional) the days persistance to restore the last active frame. (number, default = no persistence)
});
// ** Note 1:
// There are five modes of execution:
// The default 'opacity and
// slide in 'left', 'right', 'top' or 'bottom'.
/*]]>*/
</script>
</body>
</html>
Junior Coders
Image slider like this one ?
Posting Permissions
Reply With Quote
Bookmarks