Dynamic Carousel Slideshow

**u jayakodi** · 05-18-2013, 01:22 PM

U jayakodi

I have re-worked on the good old Carousel Slideshow code to make it look simpler and added dynamic features to change direction of rotation with the 4 arrow keys, change the speed with + - keys, move the carousel with PgUp / Dn keys and change the size with / * keys; the code is as given below and works well with IE for me.

Code:

<html><body></body>
<script type='text/javascript'>
pics=['http://www.dynamicdrive.com/dynamicindex14/photo1.jpg',
'http://www.dynamicdrive.com/dynamicindex14/photo2.jpg',
'http://www.dynamicdrive.com/dynamicindex14/photo3.jpg',
'http://www.dynamicdrive.com/dynamicindex14/photo4.jpg']

// or, your list of images:  pics=['c:/1.wmf','c:/2.wmf','c:/3.wmf','c:/4.wmf','c:/5.wmf']

var sides=8,speed=20,pw=100,drn="horiz",counter=0,spn=true,dn=1,mpi=Math.PI
pn=pics.length;if(sides>2*pn){sides=2*pn}

var px=[],imgx=[],imgy=[],imgw=[],ino,imn,faces,cnv

cnv=document.body.appendChild(document.createElement("div"))
with(cnv.style){width=pw;height=pw;position="absolute";left=pw;top=pw}
ino=pn+1;imn=2*pn;faces=Math.ceil(sides/2)

for(var i=0;i<pn;i++){px[i]=cnv.appendChild(document.createElement("image"))
px[i].src=pics[i];px[i+pn]=px[i];if(pn==faces){px[i+2*pn]=px[i]}
with (px[i].style){position='absolute';border="solid 1 blue"}}

function stg(){var fo=Math.floor(pw*Math.cos(mpi/sides)/Math.sin(mpi/sides)/2);var tpi=0.2*mpi/sides
for(i=0;i<=10*faces;i++){imgw[i]=pw*Math.sin(tpi*i)
imgx[i]=Math.floor(pw+dn*fo*Math.cos(tpi*i)-imgw[i]/2)}}

function rotate(){setTimeout('rotate()',speed);if(!spn){return}
if(++counter>=10){counter=0;if(++ino>=imn){ino=pn}}
px[ino-faces].style.left=-5000
for(var i=0;i<faces;i++){with(px[ino-i].style){if(drn=="vert"){top=imgx[counter+i*10];left=0;width=pw;height=imgw[counter+i*10]}
else{left=imgx[counter+i*10];top=0;height=pw;width=imgw[counter+i*10]}}}
cnv.focus()}

cnv.onmouseover=function(){spn=false}
cnv.onmouseout=function(){spn=true}
cnv.onkeyup=function(){kk=event.keyCode
switch(kk){case 40:dn=-1;drn="vert";break
case 38:dn=1;drn="vert";break
case 39:dn=-1;drn="horiz";break
case 37:dn=1;drn="horiz";break
case 107:speed=speed-10;if(speed<0){speed=0};break
case 109:speed=speed+10;break
case 34:cnv.style.left=cnv.offsetLeft+50;cnv.style.top=cnv.offsetTop+50;break
case 33:cnv.style.left=cnv.offsetLeft-50;cnv.style.top=cnv.offsetTop-50;break
case 106: pw=pw+20;break
case 111: pw=pw-20;break}
stg()}

stg()
rotate()
alert("Use arrow keys to change direction\n+ / - to change the speed\nPgUp/PgDn to move carousel\n * or / to change the size.\nmouseOver pauses spinning")
</script>
</html>

Happy coding for all.

**jscheuer1** · 05-19-2013, 08:31 AM

That code is quirks mode only and IE only. It also exposes tons of global variables, two or more undeclared even. Try this instead:

Code:

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
</body>
<script type='text/javascript'>
(function(){
var pics=[
'photo1.jpg',
'photo2.jpg',
'photo3.jpg',
'photo4.jpg'
];

// or, your list of images:  pics=['c:/1.wmf','c:/2.wmf','c:/3.wmf','c:/4.wmf','c:/5.wmf']

var sides=8,speed=20,pw=100,drn="horiz",counter=0,spn=true,dn=1,mpi=Math.PI,
pn=pics.length, px=[],imgx=[],imgy=[],imgw=[],ino,imn,faces,cnv;if(sides>2*pn){sides=2*pn}

cnv=document.body.appendChild(document.createElement("div"))
with(cnv.style){width=pw+'px';height=pw+'px';position="absolute";left=pw+'px';top=pw+'px'}
ino=pn+1;imn=2*pn;faces=Math.ceil(sides/2)

for(var i=0;i<pn;i++){px[i]=cnv.appendChild(document.createElement("img"))
px[i].src=pics[i];px[i+pn]=px[i];if(pn==faces){px[i+2*pn]=px[i]}
with (px[i].style){position='absolute';border="solid 1px blue"}}

function stg(){var fo=Math.floor(pw*Math.cos(mpi/sides)/Math.sin(mpi/sides)/2);var tpi=0.2*mpi/sides
for(i=0;i<=10*faces;i++){imgw[i]=pw*Math.sin(tpi*i)
imgx[i]=Math.floor(pw+dn*fo*Math.cos(tpi*i)-imgw[i]/2)}}

function rotate(){setTimeout(rotate,speed);if(!spn){return}
if(++counter>=10){counter=0;if(++ino>=imn){ino=pn}}
px[ino-faces].style.left=-5000+'px'
for(var i=0;i<faces;i++){with(px[ino-i].style){if(drn=="vert"){top=imgx[counter+i*10]+'px';left=0;width=pw+'px';height=imgw[counter+i*10]+'px'}
else{left=imgx[counter+i*10]+'px';top=0;height=pw+'px';width=imgw[counter+i*10]+'px'}}}
cnv.focus()}

cnv.onmouseover=function(){spn=false}
cnv.onmouseout=function(){spn=true}
document.onkeydown=function(e){e=e||event;var kk=e.keyCode;
switch(kk){case 40:dn=-1;drn="vert";break
case 38:dn=1;drn="vert";break
case 39:dn=-1;drn="horiz";break
case 37:dn=1;drn="horiz";break
case 107:speed=speed-10;if(speed<0){speed=0};break
case 109:speed=speed+10;break
case 34:cnv.style.left=cnv.offsetLeft+50+'px';cnv.style.top=cnv.offsetTop+50+'px';break
case 33:cnv.style.left=cnv.offsetLeft-50+'px';cnv.style.top=cnv.offsetTop-50+'px';break
case 106: pw=pw+20;break
case 111: pw=pw-20;break}
stg()}

stg()
rotate()

})();
alert("Use arrow keys to change direction\n+ / - to change the speed\nPgUp/PgDn to move carousel\n * or / to change the size.\nmouseOver pauses spinning")
</script>
</html>

**vwphillips** · 05-19-2013, 04:43 PM

for interest

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>
</head>

<body>
<div id="d1" style="position:relative;left:200px;top:200px;width:100px;height:190px;border:solid red 1px" ></div>
<div id="d2" style="position:relative;left:200px;top:400px;width:100px;height:100px;" ></div>


<script type="text/javascript">
/*<![CDATA[*/

var zxcSpinner={

 Direction:function(id,d){
  var o=this['zxc'+id];
  if (o){
   o.dir=typeof(d)=='number'?d<0?-1:1:o.dir;
   this.stg(o);
  }
 },

 Mode:function(id,m){
  var o=this['zxc'+id];
  o?o.mde=typeof(m)=='string'&&m.charAt(0).toUpperCase()=='V'?'V':'H':null;
 },

 Speed:function(id,s){
  var o=this['zxc'+id];
  o?o.spd=Math.max(typeof(s)=='number'?s:50,20):null;
 },

 Pause:function(id){
  var o=this['zxc'+id];
  if (o){
   clearTimeout(o.to);
   o.run=false;
  }
 },

 Auto:function(id){
  var oop=this,o=this['zxc'+id];
  if (o){
   o.to=setTimeout(function(){ oop.rotate(o); },250);
  }
 },

 init:function(o){
  var id=o.ID,m=o.Mode,sides=o.Sides,ary=o.Images,s=o.Speed,d=o.Direction,p=document.getElementById(id),lgth=ary.length,pw=p.offsetWidth,ino=lgth+1,imn=2*lgth,sides=typeof(sides)=='number'?sides:lgth,sides=Math.min(Math.max(sides,2),lgth*2),faces=Math.ceil(sides/2),px=[],o,z0=0;
  for(var z0=0;z0<lgth;z0++){
   px[z0]=p.appendChild(document.createElement("img"))
   px[z0].src=ary[z0];
   px[z0+lgth]=px[z0];
   px[z0].style.position='absolute';
   px[z0].style.border="solid 1px blue"
   if(lgth==faces){
    px[z0+2*lgth]=px[z0]
   }
  }
  this['zxc'+id]=o={
   px:px,
   imgw:[],
   imgx:[],
   faces:faces,
   sides:sides,
   pw:pw,
   lgth:lgth,
   ino:lgth+1,
   imn:2*lgth,
   cnt:0,
   dir:1,
   run:true
  }
  this.Speed(id,s);
  this.Direction(id,d);
  this.Mode(id,m);
  this.addevt(p,'mouseover','Pause',id);
  this.addevt(p,'mouseout','Auto',id);
  this.rotate(o);
 },

 stg:function(o){
  var fo=Math.floor(o.pw*Math.cos(Math.PI/o.sides)/Math.sin(Math.PI/o.sides)/2),tpi=0.2*Math.PI/o.sides,z0=0;
  for(;z0<=10*o.faces;z0++){
   o.imgw[z0]=o.pw*Math.sin(tpi*z0);
   o.imgx[z0]=Math.floor(o.pw+o.dir*fo*Math.cos(tpi*z0)-o.imgw[z0]/2);
  }
 },

 rotate:function(o){
  if(++o.cnt>=10){
   o.cnt=0;
   if(++o.ino>=o.imn){
    o.ino=o.lgth
   }
  }
  var oop=this,m=o.mde=="V"?['top','left','width','height']:['left','top','height','width'],z0=0;
  o.px[o.ino-o.faces].style[m[0]]='-5000px'
  for(;z0<o.faces;z0++){
   o.px[o.ino-z0].style[m[0]]=o.imgx[o.cnt+z0*10]+'px';
   o.px[o.ino-z0].style[m[1]]='0px';
   o.px[o.ino-z0].style[m[2]]=o.pw+'px';
   o.px[o.ino-z0].style[m[3]]=o.imgw[o.cnt+z0*10]+'px'
  }
  o.to=setTimeout(function(){ oop.rotate(o); },o.spd);
 },

 addevt:function(o,t,f,p){
  var oop=this;
  if (o.addEventListener){
   o.addEventListener(t,function(e){ return oop[f](p);}, false);
  }
  else if (o.attachEvent){
   o.attachEvent('on'+t,function(e){ return oop[f](p); });
  }
 }

}

zxcSpinner.init({
 ID:'d1',      // the unique ID name of the parent DIV.                             (string)
 Images:[      // an array of image SRCs.                                           (array)
  'http://www.vicsjavascripts.org.uk/StdImages/1.gif',
  'http://www.vicsjavascripts.org.uk/StdImages/2.gif',
  'http://www.vicsjavascripts.org.uk/StdImages/3.gif',
  'http://www.vicsjavascripts.org.uk/StdImages/4.gif'
 ],
 Mode:'V',     //(optional) the mode of execution, 'Horizontal' or 'Vertical'.      (string, default = 'Horizontal')
 Sides:6,      //(optional) the number of sides.                                    (number, default = the number of Images )
 Direction:-1  //(optional) the rotation direction, 1 = anti-clock, -1 = clockwise. (number, default = 1)
});

zxcSpinner.init({
 ID:'d2',
 Mode:'H',
 Sides:8,
 Images:[
  'http://www.vicsjavascripts.org.uk/StdImages/1.gif',
  'http://www.vicsjavascripts.org.uk/StdImages/2.gif',
  'http://www.vicsjavascripts.org.uk/StdImages/3.gif',
  'http://www.vicsjavascripts.org.uk/StdImages/4.gif'
 ]
});



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

</html>

Thread: Dynamic Carousel Slideshow

Thread Tools

Search Thread

Dynamic Carousel Slideshow

Similar Threads

Step Carousel + jScrollPane = problem with dynamic Content

HELP ME PLEASE!!! :) How to dynamically reload step carousel to fit with dynamic divs

Integrating Step Carousel Viewer with Dynamic Ajax Content

Integrating dynamic drive carousel with Wordpress

PHP Dynamic Carousel Slideshow

Bookmarks

Bookmarks

Posting Permissions