PDA

View Full Version : Help with a Slideshow



eitai2001
08-26-2009, 04:59 PM
Hi.

I want to make the kind of slideshow that is used on the front page of www.dealextreme.com at the top.

I see theirs s flash ... is it possible to make something like this with Javascript and DHTML and allow it to work with an Unordered List?

Regards

Itai

thenajsays
08-27-2009, 01:04 PM
absolutely... check this out http://www.piksite.com/carousel.us/

eitai2001
08-27-2009, 01:15 PM
absolutely... check this out http://www.piksite.com/carousel.us/

Thats just what I was looking for thanks :)
How could I modify it so that it stops spinning with the mouse over and doesn't follow the mouse and also that it opens up a new link, not a div of a picture?

I am not a java developer, so would need some advice :)

Regards

Itai

thenajsays
08-27-2009, 01:30 PM
that, my friend, is a whole other ball of yarn... since i havent worked with it before, i wouldnt even know where to begin. anything is possible though, you just have to have the right now how

eitai2001
08-27-2009, 02:04 PM
Yeah. Is there anyone reading this with any idea :)

thenajsays
08-27-2009, 02:21 PM
when you DL it, there may be documentation with it that might spell out how to customize it...

eitai2001
08-27-2009, 02:59 PM
Yeah, will take a look at it tonight.

Regards

Itai

vwphillips
08-28-2009, 04:39 PM
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>
<title></title>
<script language="JavaScript" type="text/javascript">
<!--
// Element Ellipse II (28 August 2009)



// ***** Functional Code(1.95K) - NO NEED to Change.


function zxcEllipse(id,ms,zoom,hld,col){
var elpse=document.getElementById(id);
zoom=zoom||.01;
this.rad=[elpse.offsetWidth,elpse.offsetHeight];
this.items=[];
var clds=elpse.childNodes;
for (var z0=0;z0<clds.length;z0++){
if (clds[z0].nodeType==1){
this.items.push(clds[z0]);
}
}
this.to=null;
this.to2=null;
this.zoom=zoom/100;
this.sz=[];
for (var z1=0;z1<this.items.length;z1++){
this.sz.push([this.items[z1].offsetWidth,this.items[z1].offsetHeight]);
zxcES(this.items[z1],{position:'absolute',overflow:'hidden'});
}
this.os=Math.floor(360/this.items.length);
this.ud=0;
this.spd=1;
this.deg=0;
this.rotate();

}

zxcEllipse.prototype.Rotate=function(ud,spd){
clearTimeout(this.to);
clearTimeout(this.to2);
if (typeof(spd)=='number'){
this.spd=spd;
}
if (typeof(ud)=='number'){
this.ud=ud<0?-1:ud>0?1:0;
this.rotate();
}
}

zxcEllipse.prototype.ChangeSpeed=function(inc,max){
this.spd=Math.min(this.spd+(inc||1),max||10);
var oop=this;
this.to2=setTimeout(function(){ oop.ChangeSpeed(inc,max); },200);
}

zxcEllipse.prototype.rotate=function(){
for (var oop=this,rad=Math.PI/180,top,w,h,z0=0;z0<this.items.length;z0++){
top=Math.floor(this.rad[1]/2+this.rad[1]/2*Math.sin((this.deg+this.os*z0)*rad));
w=(this.sz[z0][0]+(this.sz[z0][0]*top/this.rad[1])*this.zoom);
h=(this.sz[z0][1]+(this.sz[z0][1]*top/this.rad[1])*this.zoom);
zxcES(this.items[z0],{zIndex:top,left:Math.floor(this.rad[0]/2+this.rad[0]/2*Math.cos((this.deg+this.os*z0)*rad))-w/2+'px',top:top-h/2+'px',width:w+'px',height:h+'px'});
}
this.deg+=this.spd*this.ud;
this.deg=this.deg%360;
if (this.ud!=0){
this.to=setTimeout(function(){ oop.rotate(); },10);
}
}

function zxcES(ele,style,par,txt){
if (typeof(ele)=='string') ele=document.createElement(ele);
for (key in style) ele.style[key]=style[key];
if (par) par.appendChild(ele);
if (txt) ele.appendChild(document.createTextNode(txt));
return ele;
}


//-->
</script>
</head>

<body onload="E=new zxcEllipse('Ellipse2',10,150,0);" > E.Rotate(1);
<div id="Ellipse2" style="position:relative;visibility:visible;z-index:1;left:200px;top:50px;width:500px;height:180px;border:solid black 0px;text-align:center;" >
<img class="zxc" src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" width="100" height="20" style="border:solid black 1px;" >
<div class="zxc" style="width:100px;height:20px;background-color:red;font-size:16px;text-align:center;border:solid black 1px;" >Some Text 1</div>
<img class="zxc" src="http://www.vicsjavascripts.org.uk/StdImages/Two.gif" width="100" height="20" style="border:solid black 1px;" >
<div class="zxc" style="width:100px;height:20px;background-color:red;font-size:16px;text-align:center;border:solid black 1px;" >Some Text 2</div>
<img class="zxc" src="http://www.vicsjavascripts.org.uk/StdImages/Three.gif" width="100" height="20" style="border:solid black 1px;" >
<div class="zxc" style="width:100px;height:20px;background-color:red;font-size:16px;text-align:center;border:solid black 1px;" >Some Text 3</div>
<img class="zxc" src="http://www.vicsjavascripts.org.uk/StdImages/Four.gif" width="100" height="20" style="border:solid black 1px;" >
</div>
<input type="button" name="" value="Rotate " onmousedown="E.Rotate(1,0);E.ChangeSpeed(.1,10);" onmouseup="E.Rotate(0);">
<input type="button" name="" value="Rotate " onmousedown="E.Rotate(-1,0);E.ChangeSpeed(.1,10);" onmouseup="E.Rotate(0);">


</body>

</html>