Javascript multiple slideshow
<p>I have created an HTML file which uses java script to display images randomly displayed in 3 div tags. On click the images move left or right. It works fine until I use single slideshow in the page, but creates problem when I try multiple slideshows on the same page.</p>

<p>Here is the code for one slide show :</p>

<pre><code>**&lt;script&gt;
currentIndx = 2;

MyImages=new Array();

MyImages[0]='1images2.jpeg';

MyImages[1]='1images3.jpeg';

MyImages[2]='1images4.jpeg';

MyImages[3]='artwork.jpg';

MyImages[4]='1images5.jpeg';

imagesPreloaded = new Array(4)

for (var i = 0; i &lt; MyImages.length ; i++)

{
imagesPreloaded[i] = new Image(120,120)

imagesPreloaded[i].src=MyImages[i]
}

/* we create the functions to go forward and go back          */

function Nexter()

{

if (currentIndx&lt;MyImages.length-1){
alert(currentIndx);
document.leftimg.src=document.middleimg.src
document.middleimg.src=document.rightimg.src
document.rightimg.src=imagesPreloaded[++currentIndx].src

}
else {
alert("In nexter else")
currentIndx=0
document.leftimg.src = document.middleimg.src

document.middleimg.src = document.rightimg.src

document.rightimg.src = imagesPreloaded[currentIndx].src

}

writeImageNumber();

}
function Backer()
{
if (currentIndx&gt;0)
{

 --currentIndx; 

alert("In Backer If");

document.rightimg.src=document.middleimg.src

document.middleimg.src=document.leftimg.src

document.leftimg.src=imagesPreloaded[currentIndx].src

}

else 
{


  currentIndx = MyImages.length-1

  alert(MyImages.length +"else");

  document.rightimg.src = document.middleimg.src

  document.middleimg.src = document.leftimg.src

  document.leftimg.src = imagesPreloaded[currentIndx].src

}

writeImageNumber();

}

/*###### function to reload the images and text when refresh is pressed ##### */

function setCurrentIndex()
{
currentIndx=0;

document.theImage.src=MyImages[0];

document.form1.text1.value=Messages[0];

writeImageNumber();

}

&lt;/script&gt;

&lt;body onload="setCurrentIndex();automaticly()"&gt;

&lt;!-- start of form for image slide show ####################### --&gt;

&lt;div id ="left" style="float:left"&gt; 

&lt;a href="#" onclick="Backer()" &gt;&lt;img src="1images2.jpeg" width="265" height="262" 
border="0" name="leftimg"&gt;&lt;/a&gt;
&lt;/div&gt;

&lt;div id ="middle"  style="float:left"&gt;

&lt;a href="#" onclick=""&gt;&lt;img src="1images3.jpeg" width="265" height="262" 
 border="0"    name="middleimg"&gt;&lt;/a&gt;
&lt;/div&gt;

&lt;div id ="right" class="compimg" style="float:left"&gt; 
&lt;a href="#" onclick="Nexter()" &gt;&lt;img src="1images4.jpeg"
width="265" height="262"  alt="" border="0"name="rightimg"&gt;&lt;/a&gt;
&lt;/div&gt; 

&lt;!-- end of form for image slide show ####################### --&gt;**



Any suggestions...
</code></pre>
