Shuffling images effect in a slideshow?

**monaya** · 03-06-2012, 07:03 PM

Which javascript functions can I look into to create this flash effect - The casino rolling/shuffling of the images: http://syms.com/category/men/neckwear/ You'll get an idea after the flash loads.

I've got my photo slideshow fading images in and out. Can anything give me that rolling effect?

**vwphillips** · 03-07-2012, 04:28 PM

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[*/
#tst {
  position:absolute;left:200px;top:100px;width:200px;height:170px;border:solid red 1px;
}

#tst DIV IMG{
  width:200px;height:150px;float:left;
}

/*]]>*/
</style></head>

<body>

<input type="button" name="" value="GoTo 0" onmouseup="R1.GoTo(0);" />
<input type="button" name="" value="GoTo 1" onmouseup="R1.GoTo(1);" />
<input type="button" name="" value="GoTo 2" onmouseup="R1.GoTo(2);" />
<input type="button" name="" value="GoTo 3" onmouseup="R1.GoTo(3);" />
<input type="button" name="" value="GoTo 4" onmouseup="R1.GoTo(4);" />
<input type="button" name="" value="GoTo 5" onmouseup="R1.GoTo(5);" />
<input type="button" name="" value="GoTo 6" onmouseup="R1.GoTo(6);" />
<input type="button" name="" value="GoTo 7" onmouseup="R1.GoTo(7);" />
<div id="tst" >
 <div>
  <img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg" alt="img" />
  <img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt6.jpg" alt="img" />
  <img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt7.jpg" alt="img" />
  <img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt8.jpg" alt="img" />
  <img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt9.jpg" alt="img" />
  <img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt10.jpg" alt="img" />
  <img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt11.jpg" alt="img" />
  <img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt12.jpg" alt="img" />
 </div>
</div>

<script type="text/javascript">
/*<![CDATA[*/
// Roll Carousel (07-March-2012) DRAFT
// by Vic Phillips - http://www.vicsjavascripts.org.uk/


function zxcRollCarousel(o){
 var oop=this,obj=document.getElementById(o.ID),slide=obj.getElementsByTagName('DIV')[0],clds=slide.childNodes,ms=o.RollDuration,rolls=o.Rolls,bb=o.BounceBy,goto=o.GoTo,ary=[],max,c,z0=0;
 obj.style.overflow='hidden';
 slide.style.position='absolute';
 for (;z0<clds.length;z0++){
  if (clds[z0].nodeType==1){
   ary.push(clds[z0]);
  }
 }
 max=ary[ary.length-1].offsetTop+ary[ary.length-1].offsetHeight;
 c=slide.cloneNode(true);
 c.style.left='0px';
 c.style.top=-max+'px';
 slide.appendChild(c);
 c=c.cloneNode(true);
 c.style.top=max+'px';
 slide.appendChild(c);
 oop.obj=obj
 oop.slide=slide;
 oop.ary=ary;
 oop.max=max;
 oop.goto=-1;
 oop.ms=typeof(ms)=='number'?ms:500;
 oop.rolls=typeof(rolls)=='number'?rolls:1;
 oop.now=(obj.offsetHeight-ary[0].offsetHeight)/2;
 slide.style.top=oop.now+'px';
 oop.bary=[typeof(bb)=='number'?bb:ary[0].offsetHeight/10,4,oop.ms*4,false];
 if (typeof(goto)=='number'){
  oop.GoTo(goto);
 }
}


zxcRollCarousel.prototype={

 GoTo:function(nu){
  var oop=this,ary=oop.ary,max=oop.max;
  if (oop.ary[nu]&&nu!=oop.goto){
   clearTimeout(oop.dly);
   oop.goto=nu;
   oop.animate('top',oop.now,-max,new Date(),Math.max(this.ms*Math.abs((max-ary[nu].offsetTop)/max),2),1,-oop.ary[nu].offsetTop+(oop.obj.offsetHeight-oop.ary[nu].offsetHeight)/2);
  }
 },

 animate:function(mde,f,t,srt,mS,cnt,end){
  var oop=this,ms=new Date().getTime()-srt,now=(t-f)/mS*ms+f;
  if (isFinite(now)){
   oop.now=now;
   oop.slide.style[mde]=now+'px';
   if (typeof(cnt)=='number'&&cnt>=oop.rolls&&now<end){
    oop.slide.style[mde]=end+'px';
    oop.now=end;
    oop.bary[3]=false;
    return oop.bounce();
   }
  }
  if (ms<mS){
   oop.dly=setTimeout(function(){ oop.animate(mde,f,t,srt,mS,cnt,end); },10);
  }
  else {
   oop.now=t;
   oop.slide.style[mde]=t+'px';
   if (typeof(cnt)=='number'&&cnt<oop.rolls){
    cnt++;
    oop.animate('top',0,-oop.max,new Date(),oop.ms,cnt,end);
   }
   else {
    oop.bounce();
   }
  }
 },

 bounce:function(){
  var oop=this;
  if (!oop.bary[3]){
   oop.bary[3]=[];
   for (var z0=0;z0<oop.bary[1];z0++){
    oop.bary[3].push(oop.now+oop.bary[0]*(1-Math.sin((z0*90/oop.bary[1])*Math.PI/180))+.001);
    oop.bary[3].push(oop.now+.001);
   }
  }
  if (oop.bary[3][0]){
   oop.animate('top',oop.now,oop.bary[3][0],new Date(),oop.bary[2]/(oop.bary[1]*2),'bounce');
   this.bary[3].splice(0,1);
  }
 }


}

R1=new zxcRollCarousel({
 ID:'tst',         // the unique ID name of the parent Node.                 (string)
 Rolls:2,          //(optional) the number of rolls.                         (number, default = 1)
 RollDuration:500, //(optional) the duration in milli secondes.              (number, default = 500)
 BounceBy:10,      //(optional) the bounce distance.                         (number, default = image size/10)
 GoTo:1            //(optional) the image number to go to on initialization. (number, default = no initial goto)
});


/*]]>*/
</script>

</body>

</html>

**vwphillips** · 03-09-2012, 01:47 PM

Code:

http://www.vicsjavascripts.org.uk/RollCarousel/RollCarousel.htm

**sal_js** · 03-09-2012, 03:25 PM

great work vwphillips

Thread: Shuffling images effect in a slideshow?

Thread Tools

Search Thread

Shuffling images effect in a slideshow?

Bookmarks

Bookmarks

Posting Permissions