Scripts Giving The Same Effect?

***Scarface*** · 09-21-2009, 04:59 PM

Hi there...I remember there was an effect like this http://osc.template-help.com/wordpress_25252/ but with carousel or something...

Is there any code that give me the same result of the slide thing in the link I've posted above?

Thanks in advance.

**vwphillips** · 09-23-2009, 10:58 AM

in principle

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[*/
.parent {
  position:relative;overflow:visible;left:50px;width:740px;height:220px;border:solid black 1px;
}

#tst {
  position:absolute;overflow:hidden;left:20px;top:20px;width:700px;height:170px;border:solid black 0px;
}

.item {
  width:170px;height:70px;float:left;margin-Left:0px;
}

.item IMG{
 width:100%;
}

#tst1 {
  position:absolute;overflow:hidden;left:255px;top:10px;width:190px;height:198px;border:solid black 0px;
}

.item1 {
  width:190px;height:70px;float:left;margin-Left:0px;
}

.item1 IMG{
 width:100%;
}
/*]]>*/
</style>
<script src="http://www.vicsjavascripts.org.uk/AnimatorBasic/AnimatorBasic.js" type="text/javascript">
// by Vic Phillips http://www.vicsjavascripts.org.uk
// http://www.vicsjavascripts.org.uk/AnimatorBasic/AnimatorBasic.htm
</script>
<script type="text/javascript">
/*<![CDATA[*/
// by Vic Phillips http://www.vicsjavascripts.org.uk

function zxcSlide(id,ms,hold){
 var obj=document.getElementById(id);
 var slide=[obj.getElementsByTagName('DIV')[0]];
 var clds=slide[0].childNodes;
 for (var ary=[],z0=0;z0<clds.length;z0++){
  if (clds[z0].nodeType==1){
   ary.push(clds[z0]);
  }
 }
 slide[0].style.position='absolute';
 slide[0].style.width='1000000px';
 slide[0].style.left='0px';
 slide[0].style.top='0px';
 this.w=ary[ary.length-1].offsetLeft+ary[ary.length-1].offsetWidth;
 var os=(obj.offsetWidth-this.w)/2;
 slide[0].style.width=this.w+'px';
 var inc=this.w/ary.length,lft=0;
 while (lft<obj.offsetWidth||slide.length<4){
  slide.push(obj.appendChild(slide[0].cloneNode(true)));
  lft+=this.w;
 }
 this.pos=[os-this.w*2];
 for (var z1=1;z1<slide.length*ary.length;z1++){
  this.pos.push(this.pos[z1-1]+inc);
 }
 this.slides=[];
 for (var z2=0;z2<slide.length;z2++){
  nu=ary.length*z2;
  this.slides[z2]=zxcBAnimator('left',slide[z2],this.pos[nu],this.pos[nu]);
  this.slides[z2].nu=nu;
 }
 this.lgh=this.pos.length;
 this.ms=ms||1000;
 this.hold=hold||this.ms*3;
 this.to=null;
}

zxcSlide.prototype.Slide=function(ud){
 clearTimeout(this.to);
 if (ud){
  this.slide(ud);
 }
}

zxcSlide.prototype.Auto=function(ud,ms){
 clearTimeout(this.to);
 this.slide(ud||1);
 var oop=this;
 this.hold=ms||this.hold;
 this.to=setTimeout(function(){ oop.Auto(ud); },this.hold);
}

zxcSlide.prototype.slide=function(ud){
 for (var oop,z0=0;z0<this.slides.length;z0++){
  oop=this.slides[z0];
  oop.nu+=ud//>0?1:-1;
  oop.nu=oop.nu<0?this.lgh-1:oop.nu>=this.lgh?0:oop.nu;
  var spd=(oop.nu==17&&ud<0)||oop.nu==0?.1:1000
  this.slides[z0].update([oop.data[0],this.pos[oop.nu]],(ud<0&&oop.nu==this.lgh-1)||(ud>0&&oop.nu==0)?.1:this.ms);
 }
}

/*]]>*/
</script>
</head>

<body onload="S=new zxcSlide('tst',1000,3000);S1=new zxcSlide('tst1',1000,3000);S.Auto(-1);S1.Auto(-1)" >
<div class="parent" >
<div id="tst">
 <div>
  <div class="item" ><img src="http://osc.template-help.com/wordpress_25252/images/1page-img2.jpg" /></div>
  <div class="item" ><img src="http://osc.template-help.com/wordpress_25252/images/1page-img3.jpg" /></div>
  <div class="item" ><img src="http://osc.template-help.com/wordpress_25252/images/1page-img4.jpg" /></div>
 </div>
</div>
<div id="tst1">
 <div>
  <div class="item1" ><img src="http://osc.template-help.com/wordpress_25252/images/1page-img2.jpg" /></div>
  <div class="item1" ><img src="http://osc.template-help.com/wordpress_25252/images/1page-img3.jpg" /></div>
  <div class="item1" ><img src="http://osc.template-help.com/wordpress_25252/images/1page-img4.jpg" /></div>
 </div>
</div>
</div>
<div style="position:relative;left:00px;" >
 <input type="button" name="" value="Left" onclick="S.Slide(-1);S1.Slide(-1);" />
 <input type="button" name="" value="right" onclick="S.Slide(1);S1.Slide(1);" />
</div>
http://osc.template-help.com/wordpress_25252/?p=132#more-132
</body>

</html>

Thread: Scripts Giving The Same Effect?

Thread Tools

Search Thread

Scripts Giving The Same Effect?

Bookmarks

Bookmarks

Posting Permissions