Sep 10, 2008

Java Script Slide Show

To use this effect, download the Javascript file and the CSS file. Create two tags within your HTML that occupy the same area. In the example, these tags take up the entire screen.

Fill an array with the URLs of the images to display. You can optionally pass this list to the randomizeList function to shuffle it. Then call the startSlideshow function with this list and the IDs of the two tags.

<head runat="server">

<title> Slideshow/title>

<link rel="stylesheet" type="text/css" href="burns.css"/>

<style type="text/css">

.burnsDiv

{

overflow: hidden;

position: absolute;

left: 0;

top: 0;

width: 30%;

height: 30%;

}

/style>

/head>

<body>

<form id="form1" runat="server">

<script type="text/javascript" src="burns.js">

/script>

<div id="buffer1" class="burnsDiv">/div>

<div id="buffer2" class="burnsDiv">/div>

<script type="text/javascript">

var images = new Array(

"Image/giridhari_photo01.JPG",

"Image/Winter.JPG",

"Image/indexpic.JPG");

randomizeList(images);

startSlideshow(images, "buffer1", "buffer2");

/script>

/form>

/body>

/html>


0 comments: