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.

Image Array's Structure: [<Image's Link>, <Image's Width>, <URL to Go>]
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://boy.us.com/Code/slide.php

	margin: auto;
	width: 600px;
	overflow: hidden;

	width: 6000px; 
#ParentDiv img
float: left;
padding: 3px;
margin: 0px;


//Array Of Image, [URL, width of Image, LinkTo]
var t;
var StepTime=10;
var StepPixel=1;
var ImgPadding=3;
var ParentDivLen=600;
var Img= 
["./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)
	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]);

function DoSlide()
	divtg.style.left=Pos +'px';

function SlideStop()
function setmouse(id)


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


This code snippet would be more suited in the Code Snippets section where it can be used / referenced by the masses out there. Please reconsider posting it there.

A few comments:
location is a property of the window object and not the document object.
• Using document.write() is not so graceful; disable javascript and watch your page fail miserably. A better and more appropriate way would be to use DOM manipulation.
• It would be better if the slider could be configured by passing parameters to the function call i.e. Dr_ImgArr(stepTime, padding) • It would be even better if you could wrap the entire functionality inside a custom object which the user can instantiate. This object would have state and do away with the requirement of having globally scoped variables.

This article has been dead for over six months. Start a new discussion instead.