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[*/
#myreel {
position:relative;width:300px;height:200px;border:solid red 1px;
}
#paginate {
position:relative;width:300px;height:20px;border:solid red 1px;
}
#paginate .page {
position:relative;float:left;margin:5px;width:10px;height:10px;background-Color:#C9C9C9;border-radius: 5px;;
}
#paginate .active{
position:relative;width:10px;height:10px;border:solid #000000 1px;background-Color:#000000;
}
/*]]>*/
</style></head>
<body>
<div id="myreel" ></div>
<div id="paginate" >
</div>
<input id="b1" type="button" name="" value="Next" />
<input id="b2" type="button" name="" value="Prev" />
<input type="button" name="" value="GoTo 1" onclick="zxcReelSlideShow.GoTo('myreel',0)"/>
<input type="button" name="" value="GoTo 2" onclick="zxcReelSlideShow.GoTo('myreel',1)"/>
<input id="b5" type="button" name="" value="GoTo 3" onclick="zxcReelSlideShow.GoTo('myreel',2)"/>
<input type="button" name="" value="GoTo 4" onclick="zxcReelSlideShow.GoTo('myreel',3)"/>
<script type="text/javascript">
/*<![CDATA[*/
// Reel Slide Show (02-April-2015)
// by: Vic Phillips - http://www.vicsjavascripts.org/
var zxcReelSlideShow={
GoTo:function(id,n){
var o=this['zxc'+id];
if (o&&o.a[n]){
this.Pause(id);
if (n!=o.n){
o.ud=n>o.n?1:-1;
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 oop=this,o=oop['zxc'+id];
if (o){
o.to=setTimeout(function(){ oop.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.WrapperID,a=o.ImageArray,p=document.getElementById(id),z0=0;
if (p&&a instanceof Array){
o.id=id;
o.p=p;
for (;z0<a.length;z0++){
if (a[z0][0]&&typeof(a[z0][0])=='string'){
a[z0][3]=new Image();
a[z0][3].src=a[z0][0];
}
}
this.load(o,a);
}
},
load:function(o,a){
clearTimeout(o.to);
var oop=this,z0=0,z1=0;
for (;z0<a.length;z0++){
if (a[z0][3]&&a[z0][3].width<40){
o.to=setTimeout(function(){ oop.load(o,a); },200);
}
}
oop.ready(o,a);
},
ready:function(o,a){
var d=o.Cookie,d=typeof(d)=='string'&&d.charAt(0).toUpperCase()=='S'?'S':typeof(d)=='number'?d:-1,c=this.cookie(o.id),n=d!=-1&&c?c*1:0;
var m=o.Orientation,ms=o.SlideDuration,ah=o.AutoHold,as=o.AutoStart,add=o.AddEvents,add=add instanceof Array?add:[],w=this.css(o.p,'width'),h=this.css(o.p,'height'),m=typeof(m)=='string'?m.charAt(0).toUpperCase():'H',m=m=='V'?['top','left',h]:['left','top',w];
var p=document.getElementById(o.PaginateID),clds=p?p.getElementsByTagName('*'):[],d,an,i,z0=0,z1=0,z2=0,z3=0;
o.a=[];
for (;z0<a.length;z0++){
if (a[z0][3]&&a[z0][3].width>40){
d=document.createElement('DIV');
o.p.appendChild(d);
an=document.createElement('A');
d.appendChild(an);
i=document.createElement('IMG');
i.src=a[z0][0];
an.appendChild(i);
i.style.position=d.style.position='absolute';
d.style[m[0]]=(o.a.length!=n?m[2]:0)+'px';
d.style[m[1]]='0px';
d.style.width=w+'px';
d.style.heigth=h+'px';
i.style.left=(w-i.width)/2+'px';
i.style.top=(h-i.height)/2+'px';
a[z0][1]?a.href=a[z0][1]:null;
a[z0][2]?a.target=a[z0][2]:null;
o.a.push([d,m[0]]);
}
}
o.l=o.a.length;
o.pgs=[];
for (;z1<clds.length;z1++){
c=clds[z1].className;
if ((' '+c+' ').indexOf(' page ')>=0){
o.pgs.push([clds[z1],c]);
}
}
for (;z2<o.l;z2++){
if (!o.pgs[z2]){
d=document.createElement('DIV');
d.className='page';
o.pgs[z2]=[d,'page'];
p?p.appendChild(d):null;
}
z2!=n?null:o.pgs[z2][0].className+=' active';
this.addevt(o.pgs[z2][0],'click','GoTo',o.id,z2);
}
for (;z3<add.length;z3++){
if (add[z3]&&add[z3][0]){
p=document.getElementById(add[z3][0]);
if (p&&this[add[z3][2]]){
c=add[z3][1];
this.addevt(p,c=='mouseover'||c=='mouseout'||c=='mouseup'||c=='mousedown'||c=='mousemove'?c:'click',add[z3][2],o.id,add[z3][3]);
}
}
}
o.days=d;
o.sz=m[2];
o.ms=typeof(ms)=='number'&&ms>0?ms:1000;
o.h=typeof(ah)=='number'&&ah>0?ah:o.ms*4;
o.n=n;
o.ud=1;
this['zxc'+o.id]=o;
o.p.style.overflow='hidden';
typeof(as)=='number'&&as>0?this.Auto(o.id,as):null;
},
rotate:function(o,n){
this.Pause(o.id);
o.auto=n===true;
n=o.auto?o.n+o.ud:n;
n=(n+o.l)%o.l;
this.animate(o,o.a[o.n],0,o.sz*(o.ud>0?-1:1),new Date(),o.ms);
this.animate(o,o.a[n],o.sz*(o.ud>0?1:-1),0,new Date(),o.ms,true);
o.pgs[o.n][0].className=o.pgs[o.n][1];
o.n=n;
o.pgs[o.n][0].className=o.pgs[o.n][1]+' active';
o.days!=-1?document.cookie=o.id+'='+n+(typeof(o.days)=='number'?';expires='+(new Date(new Date().getTime()+o.days*86400000).toGMTString())+';path/;':';'):null;
},
animate:function(o,a,f,t,srt,mS,x){
clearTimeout(a[4]);
var oop=this,ms=new Date()-srt,n=(t-f)/mS*ms+f;
if (isFinite(n)){
a[0].style[a[1]]=n+'px';
}
if (ms<mS){
a[4]=setTimeout(function(){ oop.animate(o,a,f,t,srt,mS,x); },10);
}
else {
a[0].style[a[1]]=t+'px';
x===true&&o.auto?oop.Auto(o.id,o.h):null;
}
},
css:function(o,p){
return parseInt(o.currentStyle?o.currentStyle[p.replace(/-/g,'')]:document.defaultView.getComputedStyle(o,null).getPropertyValue(p.toLowerCase()));
},
cookie:function(nme){
var re=new RegExp(nme+'=[^;]+','i');
return document.cookie.match(re)?document.cookie.match(re)[0].split("=")[1]:null;
},
setc:function(o,n,v){
o.days!=-1?document.cookie=n+'='+v+(typeof(o.days)=='number'?';expires='+(new Date(new Date().getTime()+o.days*86400000).toGMTString())+';path/;':';'):null;
},
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;
}
}
zxcReelSlideShow.Init({
WrapperID:"myreel", //ID of blank DIV on page to house Slideshow
ImageArray:[
["http://www.vicsjavascripts.org/StdImages/1.gif"], //["image_path", "optional_link", "optional_target"]
["http://www.vicsjavascripts.org/StdImages/2.gif", "http://en.wikipedia.org/wiki/Cave", "_new"],
["http://www.vicsjavascripts.org/StdImages/3.gif"],
["http://www.vicsjavascripts.org/StdImages/4.gif"] //<--no trailing comma after very last image element!
],
Orientation:"h", //Valid values: "h" or "v"
Cookie:1, //remember last viewed slide and recall within same session?
SlideDuration:1000, //transition duration (milliseconds)
AutoHold:2000,
AutoStart:2000,
PaginateID:'paginate', //(optional) the unique ID of the paginate wrapper element.
AddEvents:[
// field 0 = the unique ID of the element.
// field 1 = the event type.
// field 2 = the script function name.
// field 3 = the command parameter to pass to the function.
['b1','click','Next',1],
['b2','click','Next',-1],
['b5','click','GoTo',2],
['myreel','mouseover','Pause'],
['myreel','mouseout','Auto']
]
});
/*]]>*/
</script>
</body>
</html>
Junior Coders
Dots showing images
Posting Permissions
Reply With Quote
Bookmarks