Thread: A new simple 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:

http://************/Code/slide.php

Style

Code:

<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

Code:

<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

Code:

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

		<script>
			Dr_ImgArr();
		</script>
	</div>
</div>

Whats the demo?

Yeah. Can we see a demo?

Demo: please replace '_' with '.', i can't post link:

boy_us_com/Code/slide.php

Nice script...!

Cool script but it could be done without Javascript...

Originally Posted by manHa

Cool script but it could be done without Javascript...

Yeah, it's javascript code. why do you turn off js on your browser?

You can make a marquee tag for that case