Free Fun JavaScript: Background Switcher Animation

» home
» contact
» terms of use

FREE SCRIPTS

» new
» text
» image
» utility
» background
» animation
» date/time

FREE ONLINE TOOLS

» code generators
» text animator
» drawing animator
» color animator
» slideshow factory
» javascript speed test

FREE BASIC SNIPLETS

» alert box
» image: multi-rollover
» pop-up: centering
» more

FREE'N'CRAZY

» realtime death counter
» eyeQ
» fun ticker

RECOMMENDED LINKS

» www.dynamicdrive.com
» www.hotscripts.com

Free Fun JavaScript: Background Switcher Animation
This free fun JavaScript automatically rotates through a set of background-images similar to a slideshow. Add as many background-images as you like. Easy configuration of swapping-speed and background images. Crossbrowser: Internet Explorer 5x/6x/7x/8x, Firefox 2x/3x/4x, Opera 7x/8x/9x/10x, Google Chrome 3x/4x.

Demo
Sample 1
Sample 2

Configuration:

Step 1: Open your webpage. Paste the following code between the <head> and </head> tags of your webpage:

<SCRIPT language="JavaScript"> 
// CREDITS:
// Free Fun JavaScript: Background Image Swapper
// by Peter Gehrig 
// Copyright (c) 2010 Peter Gehrig. All rights reserved.
// Permission given to use the script provided that this notice remains as is.
// Additional scripts can be found at http://www.fabulant.com

// IMPORTANT: 
// If you add this script to a script-library or a script-archive 
// you have to insert a link to http://www.fabulant.com
// right into the webpage where the script will be displayed.

// Put the background-images into the same folder as your webpage.
// Add the filnames of your background-images to the Array below (just replace 
// our background-images with your background-images) 
var slideurl=new Array("bgimage1.jpg","bgimage2.jpg","bgimage3.jpg","bgimage4.jpg","bgimage5.jpg","bgimage6.jpg")

// swapping speed (seconds)
var slidestandstill=1

// do not edit the code below
var timer

var imgpreload=new Array()
for (i=0;i<=slideurl.length-1;i++) {
	    imgpreload[i]=new Image()
	    imgpreload[i].src=slideurl[i]
}

var i_slideurl=0

slidestandstill=slidestandstill*1000

function swapimages() {
	document.body.background=slideurl[i_slideurl]
  	i_slideurl++
  	if (i_slideurl>=slideurl.length) {i_slideurl=0}
	timer=setTimeout("swapimages()",slidestandstill)	
}

window.onload=swapimages
</SCRIPT>

Step 2: Open your webpage. Go to to the top of the script and replace the filenames of our background-images with your own background-images (red code below):
var slideurl=new Array("bgimage1.jpg","bgimage2.jpg","bgimage3.jpg","bgimage4.jpg")
Add as many background-images as you like!

Step 3: Go to to the top of the script and configure the speed in seconds (red code below):
var slidestandstill=2