PDA

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


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