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[*/
.parent {
position:relative;width:200px;height:150px;border:solid red 1px;
}
.slider {
position:relative;left:0px;top:0px;width:200px;height:150px;border:solid red 1px;
}
.slider IMG{
width:200px;height:150px;float:left;
}
.pages {
position:relative;top:5px;width:350px;height:20px;
}
.page {
position:relative;width:50px;height:20px;border:solid red 1px;background-Color:green;float:left;margin-Left:5px;text-Align:center;
}
.active {
background-Color:red;
}
.mouseover {
background-Color:yellow;
}
/*]]>*/
</style></head>
<body>
<div id="tst" class="parent" >
<div class="slider" >
<img class="frame" src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg" />
<img class="frame" src="http://www.vicsjavascripts.org.uk/StdImages/Egypt6.jpg" />
<img class="frame" src="http://www.vicsjavascripts.org.uk/StdImages/Egypt7.jpg" />
<img class="frame" src="http://www.vicsjavascripts.org.uk/StdImages/Egypt8.jpg" />
</div>
</div>
<div id="pages" class="pages" >
</div>
<br />
<div id="tst2" class="parent" >
<div class="slider" >
<img class="frame" src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg" />
<img class="frame" src="http://www.vicsjavascripts.org.uk/StdImages/Egypt6.jpg" />
<img class="frame" src="http://www.vicsjavascripts.org.uk/StdImages/Egypt7.jpg" />
<img class="frame" src="http://www.vicsjavascripts.org.uk/StdImages/Egypt8.jpg" />
</div>
</div>
<div id="pages2" class="pages" >
<div class="page" >1</div>
<div class="page" >2</div>
<div class="page" >3</div>
<div class="page" >4</div>
</div>
<script type="text/javascript">
/*<![CDATA[*/
// Content Slider (24-October-2011)
// by Vic Phillips http://www.vicsjavascripts.org.uk/
function zxcContentSlider(o){
var oop=this,mde=o.Mode,mde=typeof(mde)=='string'?mde.charAt(0).toUpperCase():'H',mde=mde=='V'?['top','height','offsetTop']:['left','width','offsetLeft'],p=document.getElementById(o.ID),slide=p.getElementsByTagName('DIV')[0],clds=oop.bycls(o.CommonClass,slide),ary=[0],z0=0,ms=o.SlideDuration,page=o.Paginate;
slide.style[mde[1]]='100000px';
for (;z0<clds.length;z0++){
ary[z0]=-clds[z0][mde[2]];
}
this.slide=slide;
this.ms=typeof(ms)=='number'?ms:1000;
this.cnt=0;
this.now=ary[0];
this.ary=ary;
this.mde=mde[0];
this.pages=[];
this.goto=false;
if (typeof(page)=='object'&&oop.paginate){
oop.paginate(page,ary);
}
p.style.overflow='hidden';
}
zxcContentSlider.prototype={
GoTo:function (nu){
if (this.pages[nu]){
if (this.page){
this.page(this.cnt,0);
this.page(nu,2);
}
this.cnt=nu
this.animate(this.now,this.ary[nu],new Date(),this.ms);
}
},
animate:function(f,t,srt,mS,auto){
var oop=this,obj=oop.slide,mde=this.mde,ms=new Date().getTime()-srt,now=(t-f)/mS*ms+f;
if (isFinite(now)){
obj.style[mde]=now+'px';
oop.now=now;
}
if (ms<mS){
oop.dly=setTimeout(function(){ oop.animate(f,t,srt,mS,auto); },10);
}
else {
oop.now=t;
obj.style[mde]=t+'px';
}
},
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); });
},
bycls:function (nme,el){
for (var reg=new RegExp('\\b'+nme+'\\b'),els=el.getElementsByTagName('*'),ary=[],z0=0; z0<els.length;z0++){
if(reg.test(els[z0].className)){
ary.push(els[z0]);
}
}
return ary;
},
// Optional Paginate Code.
paginate:function(o,ary,oop){
var p=document.getElementById(o.ParentID);
if (p){
var oop=this,cls=o.CommonClass,pages=oop.bycls(cls,p),page,acls=o.ActiveClass,mcls=o.MouseOverClass,html=typeof(o.HTML)=='object'&&o.HTML.constructor==Array?o.HTML:[],scap=o.ShowCaption,z0=0,z1=ary.length;
oop.cls=[cls,cls+(typeof(mcls)=='string'?' '+mcls:''),cls+(typeof(acls)=='string'?' '+acls:'')];
oop.scap=oop.html&&(typeof(scap)!='boolean'||scap);
for (;z0<z1;z0++){
page=pages[z0]||document.createElement('DIV');
page.innerHTML=html[z0]||page.innerHTML;
if (!pages[z0]){
p.appendChild(page);
}
page.className=oop.cls[z0!=oop.cnt?0:2];
oop.pages[z0]=page;
oop.addevt(page,'mouseover','mouse',z0);
oop.addevt(page,'mouseout','mouse',z0);
oop.addevt(page,'mouseup','GoTo',z0);
}
for (;z1<pages.length;z1++){
pages[z1].parentNode.removeChild(pages[z1]);
}
}
},
page:function(nu,cls){
if (this.pages[nu]){
this.pages[nu].className=this.cls[cls];
}
},
mouse:function(nu,e){
if (nu!=this.cnt){
this.pages[nu].className=this.cls[e.type=='mouseout'?0:1];
}
}
}
new zxcContentSlider({
ID:'tst', // the unique ID name of the parent DIV. (string)
CommonClass:'frame', // the common class name of slide elements. (string)
Mode:'Horizontal', //(optional) the mode of execution, 'horizontal' or 'vertical'. (string, default = 0 = 'horizontal')
SlideDuration:1000, //(optional) the slide duration in milli seconds. (number, default = 1000)
Paginate:{ //(optional) pagination options. (object, default = no pagination)
ParentID:'pages', // the unique ID name of the painate parent DIV element. (string)
CommonClass:'page', // the common class name of paginate page elements. (string)
ActiveClass:'active', //(optional) the active class name of the 'active' paginate page element. (string, default = no active class)
MouseOverClass:'mouseover', //(optional) the mouseover class name of the 'mouseover' paginate page element. (string, default = no mouseover class)
HTML:['A','B','C','D'] //(optional) an array defining the inner HTML of each page element. (array, default = the inline HTML)
}
});
new zxcContentSlider({
ID:'tst2',
CommonClass:'frame',
SlideDuration:1000,
Mode:'Vertical',
Paginate:{
ParentID:'pages2',
CommonClass:'page',
ActiveClass:'active',
MouseOverClass:'mouseover'
}
});
/*]]>*/
</script>
</body>
</html>
Change direction and effect of content glider
Reply With Quote
Bookmarks