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

Originally Posted by thenajsays

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

Code:

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

Thread: Help with a Slideshow

Thread Tools

Search Thread

Help with a Slideshow

The Following User Says Thank You to thenajsays For This Useful Post:

Bookmarks

Bookmarks

Posting Permissions