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[*/
#scroller {
position:relative;height:65px;width:900px;border:solid red 1px;
}
.content {
height:65px;text-Align:left; /* height = the images height */
}
.content IMG{
float:left;margin-Left:5px;
}
/*]]>*/
</style>
<script type="text/javascript">
/*<![CDATA[*/
// Step Scroller with Image Resize. (20-March-2014)
// by: Vic Phillips - http://www.vicsjavascripts.org/
var zxcStepScroller={
Next:function(id,ud){
var o=this['zxc'+id];
o?this.rotate(o,o.n+(typeof(ud)=='number'&&ud<0?-1:1)):null;
},
GoTo:function(id,n){
var o=this['zxc'+id];
if (o){
this.Pause(o.id);
if (typeof(n)=='number'&&n>=0&&n<=o.lgth&&n!=o.n&&!(o.n==o.lgth&&n==0)){
o.ud=n>o.n?1:-1;
this.rotate(o,n);
}
}
},
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){
var o=this['zxc'+id];
if (o){
o.auto=false;
clearTimeout(o.to);
}
},
init:function(o){
var id=o.ScrollerID,ld=o.ImagePreload,p=document.getElementById(id),c=p?p.getElementsByTagName('DIV')[0]:null,imgs=c?c.getElementsByTagName('IMG'):[];
if (imgs[0]){
var a=[],i,z0=0;
c.style.position='absolute';
c.style.width='30000px';
for (;z0<imgs.length;z0++){
a[z0]=[imgs[z0],new Image()];
a[z0][1].src=imgs[z0].src;
}
o.id=id;
o.p=p;
o.c=c;
o.h=c.offsetHeight;
this.load(o,a,new Date(),(typeof(ld)=='number'&&ld>0?ld:5)*1000);
}
},
load:function(o,a,d,ms){
for (var oop=this,z1=0,z0=0;z0<a.length;z0++){
if (a[z0][1].width<40&&new Date()-d<ms){
o.to=setTimeout(function(){ oop.load(o,a,d,ms); },200);
return;
}
}
for (;z1<a.length;z1++){
if (a[z1][1].width<40){
o.c.removeChild(a[z1][0]);
a.splice(z1--,1);
}
else {
a[z1][0].style.height=o.h+'px';
a[z1][0].style.width=o.h/a[z1][1].height*a[z1][1].width+'px';
}
}
a[0]?oop.ready(o,a):null;
},
ready:function(o,a){
var n=0,add=o.AddEvents,ms=o.Animate,ud=o.AutoDirection,h=o.AutoHold,s=o.AutoStart,lst=a[a.length-1][0],c,z0=0,z1=1,z2=0;
o.sz=lst.offsetLeft+lst.width;
o.c.style.width=o.sz+5+'px';
o.a=[];
for (var z0=0;z0<a.length;z0++){
o.a[z0]=-a[z0][0].offsetLeft;
}
o.lgth=z0;
o.a[z0]=-o.sz+o.a[0];
c=o.c.cloneNode(true);
for (;z1<Math.ceil(o.p.offsetWidth/o.sz)+1;z1++){
c=c.cloneNode(true);
c.style.left=o.sz*z1+'px';
c.style.top='0px';
o.c.appendChild(c);
}
o.ms=typeof(ms)=='number'&&ms>20?ms:1000;
o.h=typeof(h)=='number'&&h>20?h:o.ms*4;
o.ud=typeof(ud)=='number'&&ud<0?-1:1;
o.n=0;
o.c=[o.c,'left',o.a[o.n]];
o.c[0].style.left=o.a[o.n]+'px';
o.p.style.overflow='hidden';
for (;z2<add.length;z2++){
if (add[z2]&&add[z2][0]){
n=document.getElementById(add[z2][0]);
c=add[z2][1];
if (n&&this[add[z2][2]]){
this.addevt(n,c=='mouseover'||c=='mouseout'||c=='mouseup'||c=='mousedown'?c:'click',add[z2][2],o.id,add[z2][3]);
}
}
}
this['zxc'+o.id]=o;
typeof(s)=='number'&&s>20?this.Auto(o.id,s):null;
},
rotate:function(o,a){
this.Pause(o.id);
var n=o.n;
o.auto=a===true;
n=o.auto?n+o.ud:a;
if (n>o.lgth||n<0){
o.c[2]=o.a[n>o.lgth?0:o.lgth];
n=n>o.lgth?1:o.lgth-1;
}
this.animate(o,o.c,o.c[2],o.a[n],new Date(),1000);
o.n=n
},
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.h):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;
}
}
/*]]>*/
</script>
</head>
<body>
<input type="button" name="" value="Next" onclick="zxcStepScroller.Next('scroller',1);" />
<input type="button" name="" value="Back" onclick="zxcStepScroller.Next('scroller',-1);" />
<input type="button" name="" value="GoTo 0" onclick="zxcStepScroller.GoTo('scroller',0);" />
<input type="button" name="" value="GoTo 4" onclick="zxcStepScroller.GoTo('scroller',4);" />
<input id="b1" type="button" name="" value="GoTo 8" />
<div id="scroller">
<div class="content" >
<img src="http://www.realtimehockey.net/communities/6/004/012/195/156//images/4603529507_60x60.png" />
<img src="http://www.realtimehockey.net/communities/6/004/012/195/156//images/4603545684_69x53.png" />
<img src="http://www.realtimehockey.net/communities/6/004/012/195/156//images/4603547027_81x53.png" />
<img src="http://www.realtimehockey.net/communities/6/004/012/195/156//images/4603529603_60x53.png" />
<img src="http://www.realtimehockey.net/communities/6/004/012/195/156//images/4603529423_58x53.png" />
<img src="http://www.realtimehockey.net/communities/6/004/012/195/156//images/4603545853_76x53.png" />
<img src="http://www.realtimehockey.net/communities/6/004/012/195/156//images/4603546527_57x53.png" />
<img src="http://www.realtimehockey.net/_imgstore/6/4012195156/page_home_fTCQZqoQeadkIcbDEUNj_/CALH5Culuqu_eG5qPy2ePbOANxQ.png" />
<img src="http://www.realtimehockey.net/communities/6/004/012/195/156//images/4603546637_55x53.png" />
<img src="http://www.realtimehockey.net/communities/6/004/012/195/156//images/4603546908_60x53.png" />
<img src="http://www.realtimehockey.net/communities/6/004/012/195/156//images/4603547256_71x53.png" />
<img src="http://www.realtimehockey.net/communities/6/004/012/195/156//images/4603674801_57x57.png" />
<img src="http://www.realtimehockey.net/communities/6/004/012/195/156//images/4603675115_66x61.png" />
</div>
</div>
<script type="text/javascript">
/*<![CDATA[*/
zxcStepScroller.init({
ScrollerID:'scroller', // the unique ID name of the parent DIV. (string)
ImagePreload:5, //(optional) the time allowed to load all images in seconds. (number, default = 5)
Animate:1000, //(optional) the step duration in milliseconds. (number, default = 1000)
AutoDirection:1, //(optional) the initial auto rotation direction, >0 = forward, <0 = back. (number, default = 1 = forward)
AutoHold:1000, //(optional) the auto rotation fade 'hold' delay in milli seconds. (number, default = Animate*4)
AutoStart:2000, //(optional) the delay before starting auto rotation. (number, default = no auto start)
AddEvents:[ //(optional) an array defining the event call to add to elements to control the script. (array, default = inline event calls)
// field 0 = the unique ID name of the element.
// field 1 = the event type.
// field 2 = the script function name.
// field 3 = the control parameter to pass to the function.
['scroller','mouseover','Pause'],
['scroller','mouseout','Auto'],
['b1','click','GoTo',8]
]
});
/*]]>*/
</script></body>
</html>
Javascript Image Marquee
Reply With Quote
Bookmarks