Maybe use this demo as a guide.
You can create as many slideshows on a page as you like using a single javascript object.
bannerPics is an array of 2D arrays containing the pics and their optional captions for each slideshow.
For the demo, in the window.onload I create 2 instances of the slideshow. One with control buttons and one without controls which loops continually automatically.
It works in IE9, FF5 and the other major browsers.
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
.ssCtlBtn {
width: 50px;
padding: 3px 0px 3px 0px;
}
.ssCntlBtnsContainer {
width: 150px;
padding: 0px 0px 0px 0px;
margin: 0px auto 0px auto;
}
.ssCaption {
text-align: center;
}
img {
filter:alpha(opacity=100);
opacity: 1;
}
</style>
<script type="text/javascript">
var bannerPics = [
[
['num1.jpg','caption 1'],
['num2.jpg','caption 2'],
['num3.jpg','caption 3']
],
[
['num4.jpg','caption 4'],
['num5.jpg','caption 5'],
['num6.jpg','caption 6'],
['num7.jpg','caption 7'],
['num8.jpg','caption 8'],
['num9.jpg','caption 9']
]
];
function fade(obj){
if(obj.fadeTimerImg){clearInterval(obj.fadeTimerImg);}
obj.fadeTimerImg = setInterval(function(){setOpacity(obj);},obj.speed);
}
function setOpacity(obj) {
obj.curOpac = obj.curOpac + (obj.opacStep * obj.dirn);
if(obj.curOpac < 0){
obj = swapImage(obj);
obj.curOpac = 0;
obj.dirn = 1;
fade(obj);
return;
}
if(obj.curOpac > 10){
obj.curOpac = 10;
clearInterval(obj.fadeTimerImg);
obj.dirn = -1;
obj.newImageTimer = setTimeout(function(){fade(obj);},obj.lagTime);
return;
}
if(typeof(obj.style.opacity) == 'string'){
obj.style.opacity = obj.curOpac/10;
} else {
obj.style.filter = 'alpha(opacity=' + obj.curOpac*10 + ')';
}
}
function swapImage(obj){
obj.curPic += obj.slideDir;
if(obj.curPic > obj.pics.length-1){obj.curPic = 0;}
if(obj.curPic < 0){obj.curPic = obj.pics.length-1;}
//resize the img element
var newDims = calcNewDimensions(obj.pics[obj.curPic][0].width,obj.pics[obj.curPic][0].height,obj.maxWidth,obj.maxHeight);
obj.width = newDims['width'];
obj.height = newDims['height'];
obj.src = obj.pics[obj.curPic][0].src; //swap the image
document.getElementById('cap'+obj.capNum).innerHTML = obj.pics[obj.curPic][1]; //swap caption
return obj;
}
function calcNewDimensions(width, height, maxWidth, maxHeight){
newDims = new Array();
var xRatio = maxWidth / width;
var yRatio = maxHeight / height;
//calculate the new width and height
if(width <= maxWidth && height <= maxHeight) { //image does not need resizing
newDims["width"] = width;
newDims["height"] = height;
} else if(xRatio * height < maxHeight) {
newDims["height"] = Math.round(xRatio * height);
newDims["width"] = maxWidth;
} else {
newDims["width"] = Math.round(yRatio * width);
newDims["height"] = maxHeight;
}
return newDims;
}
var captionNum = 0;
function SlideShowObj(elem, picsA){
this.elem = elem;
this.elem.pics = picsA; //preloaded pics array
this.elem.maxWidth = 100;
this.elem.maxHeight = 100;
this.elem.lagTime = 2000; //milliseconds lag between image swaps
this.elem.speed = 50; //milliseconds speed of fading
this.elem.opacStep = 0.5; //increment of opacity change
this.elem.fadeTimerImg;
this.elem.newImageTimer;
this.elem.curOpac = 10; //original image opacity: 10=opaque
this.elem.curPic = 0;
this.elem.dirn = -1; //direction of fading: 1=fading in, -1=fading out
this.elem.slideDir = 1; //direction of slide show: 1=right, -1=left
this.elem.showControls = true;
this.elem.playing = false;
this.elem.capNum = captionNum++;
this.elem.src = this.elem.pics[this.elem.curPic][0].src;
this.init=function(){
var selfO = this;
var newDims = calcNewDimensions(this.elem.pics[this.elem.curPic][0].width,this.elem.pics[this.elem.curPic][0].height,selfO.elem.maxWidth,selfO.elem.maxHeight);
selfO.elem.width = newDims['width'];
selfO.elem.height = newDims['height'];
selfO.elem.src = this.elem.src;
if(typeof(selfO.elem.style.opacity) == 'string'){
selfO.elem.style.opacity = selfO.elem.curOpac/10;
} else {
selfO.elem.style.filter = 'alpha(opacity=' + selfO.elem.curOpac*10 + ')';
}
//create the captions container
var oSlideShowContainer = selfO.elem.parentNode.parentNode;
oSlideShowContainer.style.width = selfO.elem.maxWidth+'px';
selfO.elem.parentNode.style.height = selfO.elem.maxHeight+'px';
var newDiv = document.createElement('div');
newDiv.className = 'ssCaption';
newDiv.id = 'cap'+selfO.elem.capNum;
newDiv.appendChild(document.createTextNode(selfO.elem.pics[selfO.elem.curPic][1]));
oSlideShowContainer.appendChild(newDiv);
//set up the control buttons
switch (selfO.elem.showControls){
case true:
//create the slide left button
var newDiv = document.createElement('div');
newDiv.className = 'ssCntlBtnsContainer';
var newButton = document.createElement('button');
newButton.className = 'ssCtlBtn';
newButton.innerHTML = '<';
newButton.onclick=function(){
selfO.elem.dirn = -selfO.elem.dirn;
selfO.elem.slideDir = -1;
}
newDiv.appendChild(newButton);
//create the play/stop button
newButton = document.createElement('button');
newButton.className = 'ssCtlBtn';
newButton.innerHTML = 'Play';
newButton.onclick=function(){
selfO.elem.playing = (selfO.elem.playing)? false : true;
this.innerHTML = (this.innerHTML == 'Play')? 'Stop' : 'Play';
if(selfO.elem.playing){
fade(selfO.elem);
} else {
if(selfO.elem.newImageTimer){clearTimeout(selfO.elem.newImageTimer);}
clearInterval(selfO.elem.fadeTimerImg);
}
}
newDiv.appendChild(newButton);
//create the slide right button
var newButton = document.createElement('button');
newButton.className = 'ssCtlBtn';
newButton.innerHTML = '>';
newButton.onclick=function(){
selfO.elem.dirn = -selfO.elem.dirn;
selfO.elem.slideDir = 1;
}
newDiv.appendChild(newButton);
//append the control buttons to the slideshow container
oSlideShowContainer.appendChild(newDiv);
break;
case false:
setTimeout(function(){fade(selfO.elem);},selfO.elem.lagTime);
}
}
}
window.onload=function(){
//load the pics into Image objects
var picO = new Array();
for(i=0; i < bannerPics.length; i++){
picO[i] = new Array();
for(j=0; j < bannerPics[i].length; j++){
picO[i][j] = new Array();
picO[i][j][0] = new Image();
picO[i][j][0].src = bannerPics[i][j][0];
picO[i][j][1] = bannerPics[i][j][1];
}
}
show1 = new SlideShowObj(document.getElementById('img1'),picO[0]);
show1.elem.showControls = false;
show1.init();
show2 = new SlideShowObj(document.getElementById('img2'),picO[1]);
show2.elem.lagTime = 5000;
show2.elem.showControls = true;
show2.init();
}
</script>
</head>
<body>
<!-- Preload the images in a hidden container -->
<div id="preloadedImgsContainer" style="display: none"></div>
<script type="text/javascript">
for(i=0; i < bannerPics.length; i++){
for(j=0; j < bannerPics[i].length; j++) {
var newImg = document.createElement('img');
newImg.src = bannerPics[i][j][0];
document.getElementById('preloadedImgsContainer').appendChild(newImg);
}
}
</script>
<!-- ---------------------End of image preloading ---------------------- -->
<div id="div1">
<div>
<img id="img1" src="" alt="" />
</div>
</div>
<div id="div2">
<div>
<img id="img2" src="" alt="" />
</div>
</div>
</body>
</html>
Before you post, read our: 
