PDA

View Full Version : Image revolver



gemzilla
09-11-2012, 01:52 PM
Hello,

I have tried so many different codes and nothing has worked. I am trying to make a revolving image for a website using javascript and CSS if necessary. Im looking for the images to fade nicely into the next one and the images will be located in my images folder. I do not get on with javascript.

Gemma

vwphillips
09-11-2012, 02:20 PM
<!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>
<script type="text/javascript">
/*<![CDATA[*/

// Fade Slide Show (26-July-2012)
// by Vic Phillips - http://www.vicsjavascripts.org.uk/


var zxcFadeSS={

init:function(o){
var id=o.ID,img=document.getElementById(id),ary=o.ImageArray,ms=o.FadeDuration,hold=o.HoldDuration,ms=typeof(ms)=='number'?ms:1000,hold=typeof(hold)=='number'?hold: ms*2,srt=o.AutoStart,clone=document.createElement('IMG'),src,z0=0;
for (;z0<ary.length;z0++){
src=ary[z0][0];
ary[z0][0]=new Image();
ary[z0][0].src=src;
}
clone.style.position='absolute';
clone.style.zIndex='101';
clone.style.left='-3000px';
clone.style.top='-3000px';
clone.style.width=img.width+'px';
clone.style.height=img.height+'px';
document.body.appendChild(clone);
this['zxc'+o.ID]={
id:id,
img:img,
a:img.parentNode,
clone:clone,
ary:ary,
lgth:z0-1,
ms:ms,
hold:hold,
cnt:0,
ud:1
};
if (typeof(srt)=='number'){
this.Auto(id,srt);
}
},

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,false,o.cnt+ud);
}
},

GoTo:function(id,nu){
var o=this['zxc'+id];
if (o&&o.ary[nu]&&nu!=o.cnt){
o.cnt=nu;
this.rotate(o,false,nu);
}
},

Auto:function(id,ms){
var oop=this,o=this['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;
}
},

rotate:function(o,auto,nu){
var p=this.pos(o.img);
this.Pause(o.id);
o.auto=auto===true;
if (o.auto){
nu=o.cnt+o.ud;
}
o.cnt=nu>o.lgth?0:nu<0?o.lgth:nu
o.a.removeAttribute('href');
if (o.ary[o.cnt][1]){
o.a.href=o.ary[o.cnt][1];
}
o.clone.src=o.ary[o.cnt][0].src;
o.clone.style.left=p[0]+'px';
o.clone.style.top=p[1]+'px';
clearTimeout(o.dly);
this.animate(o,0,100,new Date(),o.ms);
},

animate:function(o,f,t,srt,mS){
var oop=this,obj=o.clone,ms=new Date().getTime()-srt,now=(t-f)/mS*ms+f;
if (isFinite(now)){
obj.style.filter='alpha(opacity='+now+')';
obj.style.opacity=obj.style.MozOpacity=obj.style.WebkitOpacity=obj.style.KhtmlOpacity=now/100-.001;
}
if (ms<mS){
o.dly=setTimeout(function(){ oop.animate(o,f,t,srt,mS); },10);
}
else {
o.img.src=obj.src
obj.style.left='-3000px';
if (o.auto){
oop.Auto(o.id,o.hold);
}
}
},

pos:function(obj){
var rtn=[0,0];
while(obj){
rtn[0]+=obj.offsetLeft;
rtn[1]+=obj.offsetTop;
obj=obj.offsetParent;
}
return rtn;
}


}


/*]]>*/
</script>

</head>

<body>

<input type="button" name="" value="Next +ve" onmouseup="zxcFadeSS.Next('slide',1);" />
<input type="button" name="" value="Next -ve" onmouseup="zxcFadeSS.Next('slide',-1);" />
<input type="button" name="" value="GoTo 1" onmouseup="zxcFadeSS.GoTo('slide',0);" />
<input type="button" name="" value="GoTo 2" onmouseup="zxcFadeSS.GoTo('slide',1);" />
<input type="button" name="" value="GoTo 3" onmouseup="zxcFadeSS.GoTo('slide',2);" />
<input type="button" name="" value="GoTo 4" onmouseup="zxcFadeSS.GoTo('slide',3);" />
<br />
<br />
<a href="#">
<img src="http://i1253.photobucket.com/albums/hh590/vzcrdo5/GivingHeart-3.jpg" id="slide" border=0 width="630" height="300" scrolling="yes"
onmouseover="zxcFadeSS.Pause('slide');"
onmouseout="zxcFadeSS.Auto('slide');"
></a>
<script type="text/javascript">
/*<![CDATA[*/

zxcFadeSS.init({
ID:'slide', // the unique ID name of the image. (string)
ImageArray:[ // an array defining the slide show images SRCs and link HREFs. (array)
["http://i1253.photobucket.com/albums/hh590/vzcrdo5/GivingHeart-3.jpg","http://childrenshospitalsnationalfoundation.org/Giving_Campaign.html"],
["http://i1253.photobucket.com/albums/hh590/vzcrdo5/StartaClub-1.jpg","http://childrenshospitalsnationalfoundation.org/K.I.D.S.html"],
["http://i1253.photobucket.com/albums/hh590/vzcrdo5/FoodTrucks-1.jpg","http://childrenshospitalsnationalfoundation.org/Food_Truck_Festival.html"],
["http://i1253.photobucket.com/albums/hh590/vzcrdo5/SocialNetwork.jpg","http://childrenshospitalsnationalfoundation.org/Social_Network.html"]
],
FadeDuration:1000, //(optional) the fade duration in milli seconds. (number, default = 1000)
HoldDuration:2000, //(optional) the auto rotation fade duration in milli seconds. (number, default = FadeDuration)
AutoStart:2000 //(optional) the delay before starting auto rotation. (number, default = no auto start)
})

/*]]>*/
</script>
</body>

</html>