Free JavaScript Codes Download

JavaScriptBank · 08-11-2009, 01:21 AM

This is an easy way to determine the mouse position on a Web page. Click anywhere on the page and the coordinates will be displayed.... detail

Demo: Detecting Mouse Position

How to setup

Step 1: Place JavaScript below in your HEAD section
JavaScript

Code:

<script type="text/javascript">
// Created by: Roy Marchand | http://www.expertsrt.com

function showit() {
  document.forms['theform'].xcoord.value=event.x;
  document.getElementById('spanx').innerHTML='x = '+event.x;
  document.forms.theform.ycoord.value=event.y;
  document.getElementById('spany').innerHTML='y = '+event.y;
}

function showitMOZ(e) {
  document.forms['theform'].xcoord.value=e.pageX;
  document.getElementById('spanx').innerHTML='x = '+e.pageX;
  document.getElementById('spany').innerHTML='y = '+e.pageY;
  document.forms.theform.ycoord.value=e.pageY;
}

if (!document.all) {
  window.captureEvents(Event.CLICK);
  window.onclick=showitMOZ;
} else {
  document.onclick=showit;
}

</script>
	<!--
    	This script downloaded from www.JavaScriptBank.com
    	Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
	-->

Step 2: Place HTML below in your BODY section
HTML

Code:

<h4>You can store them in form fields</h4>
<form name="theform">
x = <input name="xcoord" type="text" readonly size="5"> 
y = <input name="ycoord" type="text" readonly size="5">
</form>
<p>
<h4>or as plain text</h4>
<span id="spanx"> </span> <span id="spany"> </span>
	<!--
    	This script downloaded from www.JavaScriptBank.com
    	Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
	-->

lqyromeo · 08-17-2009, 03:49 AM

Sorry, i could see nothing.

JavaScriptBank · 09-14-2009, 07:07 AM

This open source calendar contains three style of calendar blocks. Setup information are in each sample.... detail

Demo: Basic Web Calendar

How to setup

[REMOVED]

JavaScriptBank · 09-21-2009, 04:52 AM

This JavaScript code will change the background from one color to the next for each of the 10 colors then it starts the loop over again... detail

Demo: Color Wheel

How to setup

Step 1: Copy & Paste JavaScript code below in your HEAD section
JavaScript

Code:

<script language="javascript">
/*
     This script downloaded from www.JavaScriptBank.com
     Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
*/

<!-- Begin
// author: Eric Stremming (estremming@hotmail.com)

var pos = 10;
function initArray() {
this.length = initArray.arguments.length;
for (var i = 0; i < this.length; i++) {
this[i] = initArray.arguments[i];
   }
}
var col=new initArray("4b","5b","8b","8b");
function stop() {
document.bgColor = '#FFFFFF';
clearTimeout(loopID);
}
function start() {
col[1]="red"
col[2]="yellowgreen"
col[3]="yellow"
col[4]="whitesmoke"
col[5]="white"
col[6]="wheat"
col[7]="violet"
col[8]="turquoise"
col[9]="tomato"
col[10]="thistle"
pos++;
if (pos<0||pos>10) {
pos = 0;
}
document.bgColor = col[pos];
loopID = setTimeout("start()",50);
}
// End -->
</SCRIPT>
	<!--
    	This script downloaded from www.JavaScriptBank.com
    	Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
	-->

Step 2: Place HTML below in your BODY section
HTML

Code:

<BODY onload=start()>
<FORM>
	<INPUT onclick='parent.location="javascript:location.reload()"' type=button value=" Turn on ">
	<INPUT onclick=stop() type=button value=" Turn off"> 
</FORM>
</body>
	<!--
    	This script downloaded from www.JavaScriptBank.com
    	Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
	-->

JavaScript Enlarge Image - JavaScript Fading Slide Show - JavaScript Rotating Image script

JavaScriptBank · 09-28-2009, 08:39 AM

This is a simple JavaScript that allows the user to click and move an image. Each image is on a layer. If it is clicked for the first time, ... detail

Demo: Drag-drop image

How to setup

Step 1: Copy & Paste JavaScript code below in your HEAD section
JavaScript

Code:

<SCRIPT>
//detecting browser to dynamically write appropriate DIVs/LAYERs
N=(navigator.appName.indexOf('Netscape')!=-1&&parseInt(navigator.appVersion)<5)
S=(navigator.appName.indexOf('Netscape')!=-1&&parseInt(navigator.appVersion)>4.9)
M=(navigator.appName.indexOf('Microsoft')!=-1)



Vis=new Array()
Vis[0]=(M||S) ? "hidden" : "hide"
Vis[1]=(M||S) ? "visible" : "show"

function GetDiv(divId,divY,divX,divW,divH,bCol,visb,zInd){
bkCol=(bCol!="")?((N)?" bgColor="+bCol:";background:"+bCol):""

Styl = (M||S) ? "<DIV" : "<LAYER"

if(M||S){
Styl+=" ID="+divId
Styl+=" style='position:absolute;top:"+divY+";left:"+divX+";width:"+divW+";height:"+divH+bkCol
Styl+=";visibility:"+Vis[visb]+";z-index:"+zInd
Styl+="'>"
}

if(N){
Styl+=" ID="+divId
Styl+=" top="+divY+" left="+divX+" width="+divW+" height="+divH+bkCol
Styl+=" visibility="+Vis[visb]+" z-index="+zInd
Styl+=">"
}
document.writeln(Styl)
}

function EndDiv(){
(M||S)? document.writeln("</DIV>"): document.writeln("</LAYER>")
}

function PutIt(ID,dX,dY){
if(N){
document.layers[ID].left=dX
document.layers[ID].top=dY
}
if(M){
document.all[ID].style.left=dX
document.all[ID].style.top=dY
}
if(S){
document.getElementById(ID).style.left=dX
document.getElementById(ID).style.top=dY
}
}

function ShowHide(ID,vs){
if(N){
document.layers[ID].visibility=Vis[vs]
}
if(M){
document.all[ID].style.visibility=Vis[vs]
}
if(S){
document.getElementById(ID).style.visibility=Vis[vs]
}
}

function Xof(ID){
if(N){
return document.layers[ID].left
}
if(M){
return document.all[ID].style.left
}
if(S){
return document.getElementById(ID).style.left
}
}

function Yof(ID){
if(N){
return document.layers[ID].top
}
if(M){
return document.all[ID].style.top
}
if(S){
return document.getElementById(ID).style.top
}
}



function Zind(ID,zz){
if(N){
document.layers[ID].zIndex=zz
}
if(M){
document.all[ID].style.zIndex=zz
}
if(S){
document.getElementById(ID).style.zIndex=zz
}
}

function ChangeCol(ID,colrx){
if(M)document.all[ID].style.background=colrx
if(N)document.layers[ID].bgColor=colrx
if(S)document.getElementById(ID).style.background=colrx
}

function DivWrite(IdName,Str) {
if (N){
document.layers[IdName].document.write(Str)
document.layers[IdName].document.close()
}
if(M) document.all[IdName].innerHTML=Str
if(S) document.getElementById(IdName).innerHTML=Str
}
</SCRIPT>
<SCRIPT>
//write the layers (for NN4.7) and div 9for other browsers)

GetDiv("Pic1",150,50,50,50,'',1,1)
document.write("<a href='javascript:void(0);' onclick='Klik(\"Pic1\")'><img src=logojs.gif border=0></a>")
EndDiv()
GetDiv("Pic2",300,50,50,50,'',1,1)
document.write("<a href='javascript:void(0);' onclick='Klik(\"Pic2\")'><img src=photo3.jpg border=0></a>")
EndDiv()

//tog will be togged between 0 and 1 with every click on the defined image link
tog=0

//sensing the mouse move event - gets its coords
if(N) window.captureEvents(Event.MOUSEMOVE); 
if(N||S) window.onmousemove=newPos;
if(M) document.onmousemove=newPos; 

function newPos(e){
if(M){
mX=event.clientX
mY=event.clientY
}
if(N||S){
mX=e.pageX
mY=e.pageY
}
window.status="Mouse coords=("+mX+":"+mY+")"

//if tog is 1 (ie clicked first time - move with mouse)
//CurObj is the last image clicked

if(tog==1&&CurObj!='undefined'){
PutIt(CurObj,mX-5,mY-5)
}
}

function Klik(x){
CurObj=x
tog=!tog
}
</SCRIPT>
	<!--
    	This script downloaded from www.JavaScriptBank.com
    	Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
	-->

JavaScript Enlarge Image - JavaScript Fading Slide Show - JavaScript Rotating Image script

JavaScriptBank · 10-05-2009, 09:09 AM

A JavaScript menu that move from the bottom to top.... detail

Demo: Climbing Links

How to setup

Step 1: Copy & Paste CSS code below in your HEAD section
CSS

Code:

<style>
.links{
		font-family:Arial;
		text-align:left;
		background-color:'red';
		position:relative;
		width:120;
		text-indent:5;
		
}

.divs{
		top:0;
		left:0;
		background-color:'red';
		position:absolute;
		width:120;
		z-index:1
}

.linksdiv{
		top:0;
		left:0;
		background-color:'red';
		position:absolute;
		width:120;
		z-index:0
}
A:link{
	font-size:10pt;
	color:black;
	text-decoration:none;
	font-weigth:'bolder';}

A:visited{
	font-size:10pt;
	color:black;
	text-decoration:none;
	font-weigth:'bolder';}

A:active{
	font-size:10pt;
	color:black;
	text-decoration:none;
	font-weigth:'bolder';}
</style>
	<!--
    	This script downloaded from www.JavaScriptBank.com
    	Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
	-->

Step 2: Copy & Paste JavaScript code below in your HEAD section
JavaScript

Code:

<script language="JScript">
<!--

//place your links here (as many as you want)
var links=new Array();
links[0]="JavaScript Source"
links[1]="JavaScript Tips"
links[2]="Home"
links[3]="JavaScripts"

//set the urls of the links here
var urls=new Array();
urls[0]="http://JavaScriptBank.com/";
urls[1]="http://JavaScriptBank.com/";
urls[2]="http://JavaScriptBank.com/";
urls[3]="http://JavaScriptBank.com/";

//set the speed of the links
var intBannerSpeed=1;
	
function Start_Climbing() {
	Set_DivPositions();  
	Arrange_Links();
	//call Climb() function every 50 miliseconds 	
    	action = window.setInterval("Climb()",50);
}



function Set_DivPositions(){
	//set the position where the links start disappearing
	document.all.TopDiv.style.pixelHeight=screen.availHeight*3/10;
	document.all.MiddleDiv.style.pixelTop=screen.availHeight*3/10;
	//set the height of the area where the links displayed
	document.all.MiddleDiv.style.pixelHeight=screen.availHeight*1/10;
	//set the position where the links start appearing	
	document.all.BottomDiv.style.pixelTop = document.all.TopDiv.style.pixelHeight + document.all.MiddleDiv.style.pixelHeight;
	document.all.BottomDiv.style.pixelHeight = screen.availHeight*4/10;
	document.all.LinksDiv.style.pixelTop = document.all.BottomDiv.style.pixelTop;
}

function Arrange_Links(){
	//for each link create a div
	strLinks= "<DIV class='links' > ";
	
	for (intArrayCell=0; intArrayCell<links.length; intArrayCell++){
		strLinks +=  "<A HREF=" + urls[intArrayCell] + " onmouseover='Change_Color(this)' 				onmouseout='Change_Color(this)' >";
		strLinks +=  links[intArrayCell];
		strLinks += "</A></DIV>"
		if (intArrayCell+1==links.length)
			break;
		else
			strLinks += "<DIV class='links'  >";
	}
	strLinks +="</A></DIV>";
	
	//place all the divs inside LinksDiv div (see bottom of the page)	
	document.all.LinksDiv.innerHTML=strLinks;
	
}

function Change_Color(objLink){
	if(objLink.style.color=="white")
		objLink.style.color="black";
	else
		objLink.style.color="white";
}
function Climb() {
    	
	//every time this function is called reduce the top position of the LinksDiv by intBannerSpeed
	document.all.LinksDiv.style.pixelTop -= intBannerSpeed;
	//check if LinksDiv has reached the position where the last link has disappeared
	//if so start all over again
	if (document.all.LinksDiv.style.pixelTop<=document.all.TopDiv.style.pixelHeight - document.all.LinksDiv.offsetHeight) {
		window.clearInterval(action);
		Start_Climbing()
    	}
	
}
-->
</script>
	<!--
    	This script downloaded from www.JavaScriptBank.com
    	Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
	-->

Step 3: Place HTML below in your BODY section
HTML

Code:

<body onload="Start_Climbing()">
<div id="TopDiv" class="divs"></div>
<div id="MiddleDiv" class="linksdiv"></div>

<div id="BottomDiv" class="divs"></div>
<div id="LinksDiv" class="linksdiv"></div>
</body>
	<!--
    	This script downloaded from www.JavaScriptBank.com
    	Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
	-->

JavaScript Spotlight - JavaScript Validate E-Mail - AJAX Page Content Loader

JavaScriptBank · 10-12-2009, 08:54 AM

This JavaScript displays a countdown timer and alerts the user when the timer reaches zero. It then redirects to another Web ... detail

Demo: JavaScript Countdown Timer

How to setup

Step 1: CSS below for styling thescript, place it into HEAD section
CSS

Code:

<style type="text/css">
#txt {
  border:none;
  font-family:verdana;
  font-size:16pt;
  font-weight:bold;
  border-right-color:#FFFFFF
}

</style>
	<!--
    	This script downloaded from www.JavaScriptBank.com
    	Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
	-->

Step 2: Copy & Paste JavaScript code below in your HEAD section
JavaScript

Code:

<script language="javascript">
// Created by: Neill Broderick :: http://www.bespoke-software-solutions.co.uk/downloads/downjs.php

var mins
var secs;

function cd() {
 	mins = 1 * m("10"); // change minutes here
 	secs = 0 + s(":01"); // change seconds here (always add an additional second to your total)
 	redo();
}

function m(obj) {
 	for(var i = 0; i < obj.length; i++) {
  		if(obj.substring(i, i + 1) == ":")
  		break;
 	}
 	return(obj.substring(0, i));
}

function s(obj) {
 	for(var i = 0; i < obj.length; i++) {
  		if(obj.substring(i, i + 1) == ":")
  		break;
 	}
 	return(obj.substring(i + 1, obj.length));
}

function dis(mins,secs) {
 	var disp;
 	if(mins <= 9) {
  		disp = " 0";
 	} else {
  		disp = " ";
 	}
 	disp += mins + ":";
 	if(secs <= 9) {
  		disp += "0" + secs;
 	} else {
  		disp += secs;
 	}
 	return(disp);
}

function redo() {
 	secs--;
 	if(secs == -1) {
  		secs = 59;
  		mins--;
 	}
 	document.cd.disp.value = dis(mins,secs); // setup additional displays here.
 	if((mins == 0) && (secs == 0)) {
  		window.alert("Time is up. Press OK to continue."); // change timeout message as required
  		// window.location = "yourpage.htm" // redirects to specified page once timer ends and ok button is pressed
 	} else {
 		cd = setTimeout("redo()",1000);
 	}
}

function init() {
  cd();
}
window.onload = init;
</script>
	<!--
    	This script downloaded from www.JavaScriptBank.com
    	Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
	-->

Step 3: Place HTML below in your BODY section
HTML

Code:

<form name="cd">
<input id="txt" readonly="true" type="text" value="10:00" border="0" name="disp">
</form>
	<!--
    	This script downloaded from www.JavaScriptBank.com
    	Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
	-->

JavaScript Countdown Timer - JavaScript Currency Format - JavaScript Format Phone Number

JavaScriptBank · 10-21-2009, 08:45 AM

This JavaScript creates slideshow effect with one of transitions.... detail

Demo: Image slideshow transition

How to setup

Step 1: Use JavaScript code below to setup the script
JavaScript

Code:

<script LANGUAGE="JavaScript1.1">
<!-- Beginning of JavaScript -

messages = new Array()
//anh dung de tao hieu ung
messages[0] = "<img src=logojs.gif>"
messages[1] = "<img src=photo1.jpg>"
messages[2] = "<img src=photo2.jpg>"
messages[3] = "<img src=photo3.jpg>"
messages[4] = "<img src=photo4.jpg>"

var i_messages = 0
var timer

function dotransition() {
    if (document.all) {
        content.filters[0].apply()
        content.innerHTML = messages[i_messages]
        content.filters[0].play()
        if (i_messages >= messages.length-1) {
            i_messages = 0
        }
        else {
            i_messages++
        }
    } 
    
    if (document.layers) {
       document.nn.document.write("<table cellspacing=2 cellpadding=2 border=0><tr><td align=left>"+messages[i_messages]+"</td></tr></table>")
		document.close()
        if (i_messages >= messages.length-1) {
            i_messages = 0
        }
        else {
            i_messages++
        }
    } 
    timer = setTimeout("dotransition()",5000)   
}
// - End of JavaScript - -->
</script>
	<!--
    	This script downloaded from www.JavaScriptBank.com
    	Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
	-->

Step 2: Place HTML below in your BODY section
HTML

Code:

<BODY onload="dotransition()">
<DIV id=content style="position: relative; width:160px; height:240px; text-align:center; filter: revealTrans(Transition=12, Duration=3)"></DIV>
</BODY>
	<!--
    	This script downloaded from www.JavaScriptBank.com
    	Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
	-->

Javascript Music Player - Random Text Generator - Floating Image Script

JavaScriptBank · 10-25-2009, 09:09 PM

Bring the sound of life - music to your visitors by this JavaScript. It is an advanced web based midi player that actually enables you to jump, pause, and manipulate the play list like never before.... detail

Demo: Web based Music Player

How to setup

Step 1: Copy & Paste JavaScript code below in your HEAD section
JavaScript

Code:

<SCRIPT language=JavaScript>
<!-- Begin
counter = 0;
html = true;
songs = new Array();
function addsong() {
file = document.forms[0].file.value;
if(file == "") {
alert("Entra un nombre de archivo o da click en Examinar..");
}
else {
fn = file;
while(fn.indexOf() != -1) {
pos = fn.indexOf();
fn = fn.substring(fn.lenght);
}
if(fn.indexOf(".gif") == 1) {
alert("SÃ³lo sonidos o mÃºsica");
}
else {
songs[counter] = file;
document.forms[0].selMusica[counter] = new Option(fn, file, false, true);
counter++;
}
document.forms[0].file.value = "";
}
}
function musica() {
document.all.sound.src=document.clock.selMusica.options[document.clock.selMusica.selectedIndex].text;
}
function stop() {
document.all.sound.src="";
}
function count() {
document.clock.songs.value=document.clock.selMusica.options.length;
}
function deletethis() {
if(counter > 0) {
counter--;
document.forms[0].selMusica[counter] = null;
songs[counter] = "";
}
else {
alert("No hay nada en la lista!");
   }
}
function bajar() {
document.clock.selMusica.options[document.clock.selMusica.selectedIndex++];
saber2();
saber();
}
function subir() {
document.clock.selMusica.options[document.clock.selMusica.selectedIndex--];
saber2();
saber();
}
function saber() {
document.clock.url.value=document.clock.selMusica.options[document.clock.selMusica.selectedIndex].text;
}
function saber2() {
fn = document.clock.selMusica.options[document.clock.selMusica.selectedIndex].text;
char = unescape("%5C");
while(fn.indexOf(char) != -1) {
pos = fn.indexOf(char);
fn = fn.substring(pos + 1, fn.length);
document.clock.nombre.value=fn;
}
}
// End-->
</SCRIPT>

Step 2: Place HTML below in your BODY section
HTML

Code:

<BODY onclick=count() onload=count()>
<BGSOUND id=sound src="">
<FORM name=clock><INPUT type=file name=file size="20"> <INPUT onclick=addsong() type=button value=Add><INPUT onclick=deletethis() type=button value=Delete><BR><INPUT onclick=musica() type=button value=Listen name=empezar> 
<INPUT onclick=stop() type=button value=Stop name=detener> You have:<INPUT 
readOnly size=2 name=songs>song(s) in the list.<BR>Name of the song:<INPUT 
size=25 name=nombre><INPUT onclick="saber2(); saber()" type=button value="Know Name & Url">Url 
	of the song:<INPUT size=19 name=url> <BR><INPUT onclick=bajar() type=button value=MoveDown><INPUT onclick=subir() type=button value=MoveUp><BR><BR><SELECT 
multiple size=20 name=selMusica></SELECT> </FORM>
</BODY>

Javascript floating message - Javascript multi level drop down menu - JavaScript in_array()

JavaScriptBank · 11-09-2009, 08:43 AM

AJAX - a very great web development technology nowaday. Use this AJAX in order to load XML and HTML files on the same website with XMLHttpRequest. And in the <code>body... detail at JavaScriptBank.com - 2.000+ free JavaScript codes

Demo: AJAX Page Content Loader

How to setup

Step 1: Use CSS code below for styling the script
CSS

Code:

<style type="text/css">
<!--
#contentLYR {
  position:relative;/*
  width:200px;
  height:115px;
  left: 200px;
  top: 200px;*/
  z-index:1;
}
-->
</style>

Step 2: Use JavaScript code below to setup the script
JavaScript

Code:

<script type="text/javascript">
<!-- Begin
/*
     This script downloaded from www.JavaScriptBank.com
     Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
*/

// Created by: Eddie Traversa (2005) :: http://dhtmlnirvana.com/
function ajaxLoader(url,id) {
  if (document.getElementById) {
    var x = (window.ActiveXObject) ? new ActiveXObject("Microsoft.XMLHTTP") : new XMLHttpRequest();
  }
  if (x) {
    x.onreadystatechange = function() {
      if (x.readyState == 4 && x.status == 200) {
        el = document.getElementById(id);
        el.innerHTML = '<JavaScriptBank>This is content of demo.xml file</JavaScriptBank>';//x.responseText;
      }
    }
    x.open("GET", url, true);
    x.send(null);
  }
}
//-->
</script>

Step 3: Copy & Paste HTML code below in your BODY section
HTML

Code:

<div id="contentLYR"></div>
	<script>window.onload = function(){ajaxLoader('demo.xml','contentLYR');}</script>

Step 4: Download files below
Files
demo.xml

JavaScript Vertical Marquee - JavaScript DHTML analog clock - JavaScript Backwards Text

JavaScriptBank · 11-15-2009, 10:52 PM

JavaScript - an indispensable part for developing websites and web pages, whether that is simple pages or professional website, and whether you are senior or junior. Nowadays, JavaScript frameworks be... detail at JavaScriptBank.com - 2.000+ free JavaScript codes

Demo: Top 10 JavaScript Frameworks by Google, Yahoo, Bing

How to setup

JavaScript Bookmark Page script - JavaScript Color Wheel - JavaScript Image slideshow

JavaScriptBank · 11-19-2009, 06:28 PM

This JavaScript code - date picker helps you choose a time through a popup window. Perhaps this feature is not new on [URL="http://www.javascriptbank.com/"]J... detail at JavaScriptBank.com - 2.000+ free JavaScript codes

Demo: Time Picker with child window

How to setup

Step 1: Place JavaScript below in your HEAD section
JavaScript

Code:

<script language="JavaScript" type="text/javascript" src="timePicker.js">
/*
	Bassem R. Zohdy | bassem.zohdy@gmail.com
*/
</script>

Step 2: Place HTML below in your BODY section
HTML

Code:

<form name="form1">
	<input id="field" onkeydown="time(this.id)"/>
</form>

Step 3: Download files below
Files
down.jpg
time.html
timePicker.js
up.jpg

JavaScript Countdown Timer - JavaScript Currency Format - JavaScript Format Phone Number

JavaScriptBank · 11-22-2009, 06:57 PM

Displays images continuously in a slideshow presentation format, with a fade effect on image transitions. (Fade in Internet Explorer 4+ only).... detail at JavaScriptBank.com - 2.000+ free JavaScript codes

Demo: Fading Slide Show

How to setup

Step 1: Copy & Paste JavaScript code below in your HEAD section
JavaScript

Code:

<script>
/* 
	Original:  CodeLifter.com (support@codelifter.com)
	Web Site:  http://www.codelifter.com 
*/

// set the following variables
// Set slideShowSpeed (milliseconds)
var slideShowSpeed = 5000

// Duration of crossfade (seconds)
var crossFadeDuration = 3

// Specify the image files
var Pic = new Array() // don't touch this
// to add more images, just continue
// the pattern, adding to the array below
Pic[0] = 'logojs.gif'
Pic[1] = 'photo3.jpg'
Pic[2] = 'logojs.gif'
Pic[3] = 'photo5.jpg'
Pic[4] = 'photo2.jpg'

// do not edit anything below this line

var t
var j = 0
var p = Pic.length
var preLoad = new Array()
for (i = 0; i < p; i++){
   preLoad[i] = new Image()
   preLoad[i].src = Pic[i]
}

function runSlideShow(){
   if (document.all){
      document.images.SlideShow.style.filter="blendTrans(duration=2)"
      document.images.SlideShow.style.filter="blendTrans(duration=crossFadeDuration)"
      document.images.SlideShow.filters.blendTrans.Apply()      
   }
   document.images.SlideShow.src = preLoad[j].src
   if (document.all){
      document.images.SlideShow.filters.blendTrans.Play()
   }
   j = j + 1
   if (j > (p-1)) j=0
   t = setTimeout('runSlideShow()', slideShowSpeed)
}
</script>
	<!--
    	This script downloaded from www.JavaScriptBank.com
    	Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
	-->

Step 2: Place HTML below in your BODY section
HTML

Code:

<body onLoad="runSlideShow()">
<img id="VU" src="logojs.gif" name='SlideShow'>
</body>
	<!--
    	This script downloaded from www.JavaScriptBank.com
    	Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
	-->

JavaScript Bookmark Page script - JavaScript Color Wheel - JavaScript Image slideshow