Browsing articles tagged with " javascript slide"

javascript slide

resimleri sırasıyla basit bir kayma efekti ile göstermek isterken ortaya çıkan şey :) ;

<script type="text/javascript">var kutuSayi = 5;
var sure = 5000;
var divYukseklik = 60;
var interval=0;
var say=0;
function art()
{
	say+=1;
	if(say<divYukseklik+1)
	{
		document.getElementById("divKutu").scrollTop+=1;
	}
	else
	{
		say=0;
		clearInterval(interval);
	}
}
function kutu()
{
var divID = eval(document.getElementById("divID").innerHTML);
 
	for(i=1;i<kutuSayi+1;i++)
	{
	var iArti=i+1;
 
 
		if(i==divID)
		{
 
			//document.getElementById("goster"+i).style.visibility="visible";
 
 
			if(kutuSayi==divID)
			{
				document.getElementById("divID").innerHTML=null;
				document.getElementById("divID").innerHTML=1;
				document.getElementById("divKutu").scrollTop=0;
 
			}
			else
			{
				document.getElementById("divID").innerHTML=null;
				document.getElementById("divID").innerHTML=iArti;
				//document.getElementById("divKutu").scrollTop+=60;
 
 
				interval=setInterval("art()",30);
 
 
			}
 
		}
 
	}
 
}
function n(){}
function yukseklik(yuk)
{
	for(h=1;h<kutuSayi+1;h++)
	{
		document.getElementById("goster"+h).style.height=yuk;
		document.getElementById("goster"+h).style.border="1px dashed black";
		divYukseklik=yuk;
 
	}
}
function yukle()
{
	yukseklik(divYukseklik);
 
}
window.setInterval('kutu()',sure);
 
 
</script>
<div id="divID" style="visibility:hidden;">1</div>
<div id="divKutu" style="overflow: hidden; height: 60px; width: 150px;">
<div id="goster1">bir</div>
<div id="goster2">iki</div>
<div id="goster3">uc</div>
<div id="goster4">dort</div>
<div id="goster5">bes</div>
</div>

demo