Log in

View Full Version : 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.




<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:


<!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


<!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=t ypeof(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>