A new simply way to make a image slider- Javascript Code

Hi all!
I found that is difficult to search a simple javascript code about scrolling image slide. You can find them on Internet but they often are long and complex or hidden from us to prevent edit.
I just found a simple way to resolve this. I hope it will help your editting easier to make it yours!
We need 2 div tag to make a slide. ChildDiv to store image array and ParentDiv to contain Child Div.

Note:
Image Array's Structure: [<Image's Link>, <Image's Width>, <URL to Go>]
Functions:
DoSlide(), Make Slide to run.
setmouse(param), set Slide play and pause when pointer over or out on images;
Dr_ImgArr(); Print image array to HTML;
getE(), getElementById();
DivWidth: Width of ParentDiv;
MoreImage: Num Of Image on a begin of Image Array, insert into the last of ChildDiv to continue the Slide;
....
If you have anymore comment, please reply here so that I can make it more perfect,
thank for all.
Demo: JS Image Slide Example
Style


<style>

#ParentDiv

{

	margin: auto;

	width: 600px;

	overflow: hidden;

}


#ChildDiv

{

	width: 6000px; 

	position:relative;

	cursor:pointer;

}

#ParentDiv img

{

float: left;

padding: 3px;

margin: 0px;

}

</style>

Javascript


<script>

//Array Of Image, [URL, width of Image, LinkTo]

var t;

var StepTime=10;

var StepPixel=1;

var ImgPadding=3;

var ParentDivLen=600;

var Img= Array(

["./images/slide/3_116.jpg", 104, "../gal/?gal=3&Type=image&ID=116"], 

["./images/slide/4_250.jpg", 103, "../gal/?gal=4&Type=image&ID=250"], 

["./images/slide/1_157.jpg", 107, "../gal/?gal=1&Type=image&ID=157"], 

["./images/slide/2_120.jpg", 124, "../gal/?gal=2&Type=image&ID=120"], 

["./images/slide/4_229.jpg", 116, "../gal/?gal=4&Type=image&ID=229"], 

["./images/slide/3_173.jpg", 113, "../gal/?gal=3&Type=image&ID=173"], 

["./images/slide/2_192.jpg", 110, "../gal/?gal=2&Type=image&ID=192"], 

["./images/slide/4_111.jpg", 104, "../gal/?gal=4&Type=image&ID=111"], 

["./images/slide/5_244.jpg", 106, "../gal/?gal=5&Type=image&ID=244"], 

["./images/slide/5_279.jpg", 109, "../gal/?gal=5&Type=image&ID=279"], 

["./images/slide/5_233.jpg", 102, "../gal/?gal=5&Type=image&ID=233"], 

["./images/slide/5_256.jpg", 106, "../gal/?gal=5&Type=image&ID=256"], 

["./images/slide/5_248.jpg", 111, "../gal/?gal=5&Type=image&ID=248"], 

["./images/slide/3_143.jpg", 99, "../gal/?gal=3&Type=image&ID=143"], 

["./images/slide/1_225.jpg", 103, "../gal/?gal=1&Type=image&ID=225"], 

["./images/slide/4_103.jpg", 109, "../gal/?gal=4&Type=image&ID=103"], 

["./images/slide/4_145.jpg", 118, "../gal/?gal=4&Type=image&ID=145"], 

["./images/slide/5_263.jpg", 100, "../gal/?gal=5&Type=image&ID=263"], 

["./images/slide/2_115.jpg", 102, "../gal/?gal=2&Type=image&ID=115"], 

["./images/slide/4_140.jpg", 122, "../gal/?gal=4&Type=image&ID=140"], 

["./images/slide/1_214.jpg", 112, "../gal/?gal=1&Type=image&ID=214"], 

["./images/slide/3_142.jpg", 102, "../gal/?gal=3&Type=image&ID=142"], 

["./images/slide/5_297.jpg", 99, "../gal/?gal=5&Type=image&ID=297"], 

["./images/slide/4_168.jpg", 101, "../gal/?gal=4&Type=image&ID=168"], 

["./images/slide/5_277.jpg", 111, "../gal/?gal=5&Type=image&ID=277"], 

["./images/slide/5_296.jpg", 103, "../gal/?gal=5&Type=image&ID=296"], 

["./images/slide/4_169.jpg", 109, "../gal/?gal=4&Type=image&ID=169"], 

["./images/slide/4_244.jpg", 110, "../gal/?gal=4&Type=image&ID=244"], 

["./images/slide/5_285.jpg", 112, "../gal/?gal=5&Type=image&ID=285"], 

["./images/slide/3_100.jpg", 111, "../gal/?gal=3&Type=image&ID=100"], 

["./images/slide/1_103.jpg", 111, "../gal/?gal=1&Type=image&ID=103"], 

["./images/slide/1_119.jpg", 104, "../gal/?gal=1&Type=image&ID=119"], 

["./images/slide/5_253.jpg", 107, "../gal/?gal=5&Type=image&ID=253"], 

["./images/slide/4_183.jpg", 105, "../gal/?gal=4&Type=image&ID=183"], 

["./images/slide/4_171.jpg", 111, "../gal/?gal=4&Type=image&ID=171"], 

["./images/slide/2_147.jpg", 126, "../gal/?gal=2&Type=image&ID=147"], 

["./images/slide/3_115.jpg", 116, "../gal/?gal=3&Type=image&ID=115"], 

["./images/slide/5_310.jpg", 113, "../gal/?gal=5&Type=image&ID=310"], 

["./images/slide/4_185.jpg", 109, "../gal/?gal=4&Type=image&ID=185"], 

["./images/slide/3_159.jpg", 108, "../gal/?gal=3&Type=image&ID=159"], 

["./images/slide/2_154.jpg", 125, "../gal/?gal=2&Type=image&ID=154"], 

["./images/slide/5_314.jpg", 107, "../gal/?gal=5&Type=image&ID=314"], 

["./images/slide/2_106.jpg", 100, "../gal/?gal=2&Type=image&ID=106"], 

["./images/slide/4_123.jpg", 103, "../gal/?gal=4&Type=image&ID=123"]

);

var Pos=0;

var Len=Img.length;


var DivWidth=0;

var MoreImage=0; 


function goURL(URLS)

{

	document.location.href=URLS;

}

for(i=0;i<Len;i++)

{

	DivWidth+=Img[i][1] + ImgPadding*2;

	if(MoreImage==0 && DivWidth>ParentDivLen)MoreImage=i;

}

function getE(id)

{

	return document.getElementById(id);

}


function Dr_Img(IMG)

{

	return '<img src="'+ IMG[0] + '" onclick="goURL(\'' + IMG[2] + '\')">';

}


function Dr_ImgArr()

{

	var str='';

	for(i=0;i<Len;i++) str += Dr_Img(Img[i]);

	for(i=0;i<MoreImage;i++)str += Dr_Img(Img[i]);

	document.write(str);

}


function DoSlide()

{

	if(Pos==0)Pos=-1;

	divtg=getE('ChildDiv');

	Pos-=StepPixel;

	if(Pos<-DivWidth)Pos=0;

	divtg.style.left=Pos +'px';

	t=setTimeout('DoSlide()',StepTime);

	

}


function SlideStop()

{

    clearTimeout(t);

}

function setmouse(id)

{

    if(id==1)

    {

        DoSlide();

    }

    else

    {

        SlideStop();

    }

}

</script>

HTML Body


<div id="ParentDiv">

	<div id="ChildDiv" onmouseout="setmouse(1);" onmouseover="setmouse(2);">


		<script>

			Dr_ImgArr();

		</script>

	</div>

</div>