<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#slider {
position:absolute;left:0px;top:0px;width:500px;height:400px;border:solid red 1px;
}
.slide {
left:0px;top:0px;width:500px;height:400px;
}
</style>
</head>
<body>
<div id="slider">
<div class="slide" >
<h1>Welcome to My Core</h1>
<p>Start by choosing your name</p>
<form action="">
Username: <input type=" text" name="Username"><br>
<p>Then choose your gender</p>
<input type="radio" name="gender" value="Male">Male<br>
<input type="radio" name="gender" value="Female">Female
</form>
<p>Press the Play button to play!<p>
<button onclick="zxcSlider.GoTo('slider',1);" >Play</button>
</div>
<div class="slide" >
Hello and welcome to World of My Core!<br />
What would you like to do?<br />
<button onclick="zxcSlider.GoTo('slider',0);" >Inventory</button>
</div>
<script type="text/javascript">
/*<![CDATA[*/
var zxcSlider={
Auto:function(id,ms){
var oop=this,o=oop['zxc'+id];
o?o.to=setTimeout(function(){ oop.rotate(o,true); },ms||500):null;
},
Pause:function(id){
var o=this['zxc'+id];
if (o){
clearTimeout(o.to);
o.auto=false;
}
},
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&&o.ary[c]){
this.Pause(id);
if (c!=o.c){
o.ud=c>o.c?1:-1;
this.rotate(o,c);
}
}
},
init:function(o){
var id=o.ID,ud=o.Direction,ms=o.Animate,hold=o.AutoHold,srt=o.AutoStart,p=document.getElementById(id);
if (p){
var clds=p.childNodes,sz=p.offsetWidth,ary=[],z0=0;
for (;z0<clds.length;z0++){
if (clds[z0].nodeType==1){
clds[z0].style.position='absolute';
clds[z0].style.left=(ary.length>0?-sz:0)+'px';
clds[z0].style.width=sz+'px';
ary.push([clds[z0],'left']);
}
}
o.id=id;
o.ary=ary;
o.lgth=ary.length-1;
o.sz=sz;
o.ms=typeof(ms)=='number'&&ms>10?ms:1000;
o.hold=typeof(hold)=='number'&&hold>10?hold:o.ms*4;
o.ud=typeof(ud)=='number'&&ud<0?-1:1;
o.c=0;
p.style.overflow='hidden';
this['zxc'+id]=o;
typeof(srt)=='number'&&srt>10?this.Auto(id,srt):null;
}
},
rotate:function(o,a){
var c=o.c;
this.Pause(o.id);
o.auto=a===true;
c=o.auto?c+o.ud:a;
c=c>o.lgth?0:c<0?o.lgth:c;
this.animate(o,o.ary[o.c],0,o.sz*(o.ud>0?1:-1),new Date(),o.ms);
this.animate(o,o.ary[c],o.sz*(o.ud>0?-1:1),0,new Date(),o.ms,true);
o.c=c;
},
animate:function(o,a,f,t,srt,mS,nxt){
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,nxt); },10);
}
else {
a[0].style[a[1]]=t+'px';
o.auto&&nxt?oop.Auto(o.id,o.hold):null;
}
}
}
zxcSlider.init({
ID:'slider', // the unique ID name of the parent DIV. (string)
Direction:-1, //(optional) the slide direction, 1 = forward, -1 =back. (number, default = 1 = forward)
Animate:1150, //(optional) the animation duration in millisec. (number, default = 1000)
AutoHold:2500, //(optional) the auto rotate delay in millisec. (number, default = Animate*4)
AutoStart:false //(optional) the auto rotate start delay in millisec. (number, default = no auto start)
})
/*]]>*/
</script>
</body>
</html>