<!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[*/
#ss {
position:absolute;left:100px;top:100px;width:200px;height:150px;border:solid red 1px;
}
#ss IMG {
width:200px;height:150px;float:left;
}
#txt {
position:absolute;left:310px;top:100px;width:200px;height:150px;border:solid red 1px;
}
#txt DIV {
position:absolute;visibility:hidden;left:0px;top:0px;width:200px;height:150px;background-Color:#FFFFCC;
}
#txt .active {
visibility:visible;
}
/*]]>*/
</style></head>
<body>
<input type="button" name="" value="GoTo 0" onmouseup="zxcSlideSlideShow.GoTo('ss',0);"/>
<input type="button" name="" value="GoTo 1" onmouseup="zxcSlideSlideShow.GoTo('ss',1);"/>
<input type="button" name="" value="GoTo 2" onmouseup="zxcSlideSlideShow.GoTo('ss',2);"/>
<input type="button" name="" value="Auto" onmouseup="zxcSlideSlideShow.Auto('ss');"/>
<input type="button" name="" value="Pause" onmouseup="zxcSlideSlideShow.Pause('ss');"/>
<div id="ss" >
<div>
<img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg" alt="img" />
<img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt6.jpg" alt="img" />
<img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt7.jpg" alt="img" />
</div>
</div>
<div id="txt" >
<div class="default" >My Text One</div>
<div class="default" >My Text Two</div>
<div class="default" >My Text Three</div>
</div>
<script type="text/javascript">
/*<![CDATA[*/
// Slide Slide Show (10-October-2013)
// by Vic Phillips http://www.vicsjavascripts.org.uk/
var zxcSlideSlideShow={
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.c+ud);
}
},
GoTo:function(id,c){
var o=this['zxc'+id];
if (o){
this.Pause(id);
if (o.ary[c]&&c!=o.rc){
o.ud=c>o.rc?1:-1;
this.rotate(o,c);
}
}
},
Direction:function(id,ud){
var o=this['zxc'+id];
o&&typeof(ud)=='number'?o.ud=(ud<0?-1:1):null;
},
Auto:function(id,ms){
var oop=this,o=oop['zxc'+id];
o?o.to=setTimeout(function(){ oop.rotate(o,true); },ms||200):null;
},
Pause:function(id,ms){
var o=this['zxc'+id];
if (o){
clearTimeout(o.to);
o.auto=false;
}
},
init:function(o){
var id=o.SlideID,m=o.Mode,n=o.DisplaySlide,ud=o.Direction,ms=o.SlideDuration,hold=o.AutoHold,srt=o.AutoStart,a=o.AddEvents,pag=document.getElementById(o.PaginateID) ,p=document.getElementById(id),s=p?p.getElementsByTagName('DIV')[0]:null;
if (s){
var m=typeof(m)=='string'&&m.charAt(0)=='H'?['left','width','offsetLeft']:['top','height','offsetTop'],ms=typeof(ms)=='number'&&ms>20?ms:1000;
var clds=s.childNodes,c,t,z0=0,z1=0,z2=0;
o.ary=[];
p.style.overflow='hidden';
s.style.position='absolute';
s.style.textAlign='left';
s.style[m[1]]='50000px';
for (;z0<clds.length;z0++){
if (clds[z0].nodeType==1){
o.ary.push(clds[z0]);
}
}
if (o.ary[1]){
o.c=o.ary[n]?n:0;
o.rc=o.c;
c=o.ary[0].cloneNode(true);
s.appendChild(c);
o.ary.push(c);
o.id=id;
o.m=m;
o.s=[s,m[0]];
o.lgth=o.ary.length-1;
o.ms=ms;
o.hold=typeof(hold)=='number'&&hold>20?hold:ms*4;
o.ud=typeof(ud)=='number'&&ud<0?-1:1;
o.s=[s,m[0],-o.ary[o.c][m[2]]];
s.style[m[0]]=o.s[2]+'px';
if (a instanceof Array){
for (;z1<a.length;z1++){
c=document.getElementById(a[z1][0]);
t=a[z1][1];
c&&this[a[z1][2]]?this.addevt(c,t=='click'||t=='mouseover'||t=='mouseout'||t=='mousedown'?t:'mouseup',a[z1][2],o.id,a[z1][3]):null;
}
}
o.pge=[];
if (pag){
clds=this.bycls('default',pag);
for (;z2<o.lgth;z2++){
c=clds[z2]||document.createElement('DIV');
t=c.className;
o.pge[z2]=[c,t,t+' active'];
c.className=o.pge[z2][z2!=o.c?1:2];
this.addevt(c,'mouseup','GoTo',id,z0);
}
}
this['zxc'+id]=o;
typeof(o.OnSlide)=='function'?o.OnSlide(o.c):null;
typeof(srt)=='number'&&srt>=0?this.Auto(id,srt):null;
}
}
},
rotate:function(o,n){
var c=o.c,a=o.ary;
o.pge[c]?o.pge[c][0].className=o.pge[c][1]:null;
o.auto=n===true;
c=o.auto?c+o.ud:n;
if ((o.ud>0&&c>o.lgth)||(o.ud<0&&c<0)){
c=o.ud>0?1:o.lgth-1;
o.s[2]=-o.ary[o.ud>0?0:o.lgth][o.m[2]];
}
if (o.ud<0&&c<0){
c=o.lgth-1;
o.s[2]=-o.ary[o.lgth][o.m[2]];
}
c=o.ary[c]?c:o.ud>0?0:o.lgth;
this.animate(o,o.s,o.s[2],-o.ary[c][o.m[2]],new Date(),o.ms);
o.c=c;
c=c<o.lgth?c:0;
o.rc=c;
o.pge[c]?o.pge[c][0].className=o.pge[c][2]:null;
typeof(o.OnSlide)=='function'?o.OnSlide(c):null;
},
animate:function(o,a,f,t,srt,mS){
clearTimeout(a[4]);
var oop=this,ms=new Date()-srt,n=(t-f)/mS*ms+f;
if (isFinite(n)){
a[2]=n;
a[0].style[a[1]]=n+'px';
}
if (ms<mS){
a[4]=setTimeout(function(){ oop.animate(o,a,f,t,srt,mS); },10);
}
else {
a[2]=t;
a[0].style[a[1]]=t+'px';
o.auto?oop.Auto(o.id,o.hold):null;
}
},
bycls:function(nme,el){
for (var reg=new RegExp('\\W'+nme+'\\W'),els=el.getElementsByTagName('*'),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,p1){
var oop=this;
o.addEventListener?o.addEventListener(t,function(e){ return oop[f](p,p1);},false):o.attachEvent?o.attachEvent('on'+t,function(e){ return oop[f](p,p1); }):null;
}
}
zxcSlideSlideShow.init({
SlideID:'ss', // the unique ID name of the parent DIV. (string)
Mode:'Horizontal', //(optional) the mode of execution., 'Vertical' or 'Horizontal' (string, default = 'Vertical')
DisplaySlide:0, //(optional) the index number of the initial slide. (number, default = no initial slide)
Direction:1, //(optional) 1 = auto rotate forward, -1 = auto rotate back. (number, default = 1 = forward)
PaginateID:'txt', //(optional) the unique ID name of the pagination DIV.. (string, default = no pagination)
SlideDuration:1000, //(optional) the slide duration in mill seconds. (number, default = 1000)
AutoHold:3000, //(optional) the auto rotate hold duration in mill seconds. (number, default = SlideDuration*4)
AutoStart:3000, //(optional) the auto rotate start delay in mill seconds. (number, default = no auto start)
AddEvents:[ //(optional) an array defining event calls to control the script. (array, default = inline event calls)
// field 0 = the unique ID name of the element to add the event call to.
// field 1 = the event type.
// field 2 = the script function(see Script Functions).
// field 3 = (optional) the parameter to pass to the function(see Script Functions).
['ss','mouseover','Pause'],
['ss','mouseout','Auto']
],
OnSlide:function(n){ //(optional) the function to call when the the scroller slides. (function, default = no function)
// n = the slide number
}
});
/*]]>*/
</script>
</body>
</html>