Floating Transparent SlideShow

JavaScriptSource Staff Mar 4, 2004

This script creates a floating layer, within which is an automatic slide show that includes fade transitions. The slideshow cycles through the images that you specify.

The JavaScript Source: Image Effects: Floating Transparent SlideShow

Simply click inside the window below, use your cursor to highlight the script, and copy (type Control-c or Apple-c) the script into a new file in your text editor (such as Note Pad or Simple Text) and save (Control-s or Command-s). The script is yours!!!

<!-- TWO STEPS TO INSTALL FLOATING TRANSPARENT SLIDESHOW:

1.  Add the onLoad event handler into the BODY tag
  2.  Copy the coding into the BODY of your HTML document  -->

<div id="FloatSlideShow" style="position:absolute;z-index:1000000">
<a href="http://www.codebrain.com" target=_new>
<img border=0 src="float1_trans.gif" name='SlideShow' width=200 height=200></a>
</div>

/* Floating Slide Show Script C.2004 by CodeLifter.com */

// You *must* add onload="runSlideShow()" to the <body> tag
// of the page.

// In the section marked Edit the HTML, above, remember to
// set the path and size for the first image.

// =======================================
// Set the following variables
// =======================================

// Set slideShowSpeed (milliseconds):
var slideShowSpeed = 3000

// Duration of crossfade (seconds) for IE:
var crossFadeDuration = 3

// Set the positioning variables, below:
// Negative numbers are relative to right (whereX) or bottom (whereY)
// Positive numbers are relative to left (whereX) or (whereY) top
// Experiment with values to get positioning exact, and allow
// for the dimensions of the image in the positioning

var whereX = 140;
var whereY = -233;

// 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] = 'float1_trans.gif'
Pic[1] = 'float2_trans.gif'
Pic[2] = 'float3_trans.gif'
Pic[3] = 'float4_trans.gif'
Pic[4] = 'float5_trans.gif'

// =======================================
// Do not edit *anything* below this line!
// =======================================

<p><center>
<font face="arial, helvetica" size"-2">Free JavaScripts provided<br>
by <a href="http://javascriptsource.com">The JavaScript Source</a></font>
</center><p>

Did you use this script? Do you like this site? Please link to us!

Leave a Response

(0 comments)

Alphabetical Listing

Tutorials

Ajax Tutorials

Ajax

Buttons

Cookies

CSS

Forms

Games

Generators

Image Effects

Math Related

Miscellaneous

Multimedia

Navigation

Page Details

Password

Snippets

Text Effects

Time & Date

User Details

Floating Transparent SlideShow

Leave a Response

Attention JavaScript Coders

Go Deeper