Menu
Good evening (or morning) to mighty web developers smarter than I!
I am using JavaScript to create a slide show with fade out/in. There are two images shown simultaneously and they must stay in sync.
I want to add a Pause and Restart button that will allow the visitor to stop the slide show (both images) and restart the slide show (again, both images simultaneously).
Much appreciation for thoughtful replies!
Here’s my code:
<!DOCTYPE html
PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“
<html xmlns=”
<head>
<title>Gallery</title>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<meta http-equiv=”language” content=”en-us” />
<!–
<script language=”JavaScript” type=”text/JavaScript” src=”../JS/FILE NAME.js”></script>
–>
<link type=”text/css” rel=”stylesheet” href=”./CSS/style1.css”/>
<script type=”text/JavaScript”>
<!– Original: CodeLifter.com (
<!– Web Site: [url]http://www.codelifter.com
<!– Begin
// Set slideShowSpeed (milliseconds)
var slideShowSpeed = 4000;
// Duration of crossfade (seconds)
var crossFadeDuration = 3;
// Specify the image files
var Pic = new Array();
var Pic2 = new Array();
// to add more images, just continue
// the pattern, adding to the array below
Pic[0] = ‘images/pic0001.jpg’
Pic[1] = ‘images/pic0002.jpg’
Pic[2] = ‘images/pic0003.jpg’
Pic[3] = ‘images/pic0004.jpg’
Pic[4] = ‘images/pic0005.jpg’
Pic[5] = ‘images/pic0006.jpg’
Pic[6] = ‘images/pic0007.jpg’
Pic[7] = ‘images/pic0008.jpg’
Pic[8] = ‘images/pic0009.jpg’
Pic[9] = ‘images/pic0010.jpg’
Pic[10] = ‘images/pic0011.jpg’
Pic[11] = ‘images/pic0012.jpg’
Pic[12] = ‘images/pic0013.jpg’
Pic[13] = ‘images/pic0014.jpg’
Pic[14] = ‘images/pic0015.jpg’
// /*
Pic2[0] = ‘images/pic0001a.jpg’
Pic2[1] = ‘images/pic0002a.jpg’
Pic2[2] = ‘images/pic0003a.jpg’
Pic2[3] = ‘images/pic0004a.jpg’
Pic2[4] = ‘images/pic0005a.jpg’
Pic2[5] = ‘images/pic0006a.jpg’
Pic2[6] = ‘images/pic0007a.jpg’
Pic2[7] = ‘images/pic0008a.jpg’
Pic2[8] = ‘images/pic0009a.jpg’
Pic2[9] = ‘images/pic0010a.jpg’
Pic2[10] = ‘images/pic0011a.jpg’
Pic2[11] = ‘images/pic0008a.jpg’
Pic2[12] = ‘images/pic0008a.jpg’
Pic2[13] = ‘images/pic0008a.jpg’
Pic2[14] = ‘images/pic0008a.jpg’
// */
// do not edit anything below this line
var t;
var tt;
var j = 0;
var jj = 0;
var p = Pic.length;
var pp = Pic2.length;
var preLoad = new Array();
var preLoad2 = new Array();
for (i = 0; i < p; i++)
{
preLoad[i] = new Image();
preLoad[i].src = Pic[i];
}
for (ii = 0; ii < pp; ii++)
{
preLoad2[ii] = new Image();
preLoad2[ii].src = Pic2[ii];
}
function runSlideShow()
{
if (document.all)
{
document.images.SlideShow.style.filter=”blendTrans(duration=2)”;
document.images.SlideShow.style.filter=”blendTrans(duration=crossFadeDuration)”;
document.images.SlideShow.filters.blendTrans.Apply();
document.images.SlideShow2.style.filter=”blendTrans(duration=2)”;
document.images.SlideShow2.style.filter=”blendTrans(duration=crossFadeDuration2)”;
document.images.SlideShow2.filters.blendTrans.Apply();
}
document.images.SlideShow.src = preLoad[j].src;
document.images.SlideShow2.src = preLoad2[jj].src;
if (document.all)
{
document.images.SlideShow.filters.blendTrans.Play();
document.images.SlideShow2.filters.blendTrans.Play();
}
j = j + 1;
jj = jj + 1;
if (j > (p – 1))
j = 0;
if (jj > (pp – 1))
jj = 0;
t = setTimeout(‘runSlideShow()’, slideShowSpeed);
}
// End –>
</script>
</head>
<body onload=”runSlideShow()”>
<!–CONTENT–>
<div id=”content” style=”background: rgb(255,255,93)” >
<table border=”0″ cellpadding=”4″ cellspacing=”10″ align=”center” >
<tr>
<td id=”VU” width=”70%” >
<img name=”SlideShow” src=”images/pic0001.jpg” alt=”” border=”5″/>
</td>
<td id=”VU2″ width=”30%”>
<img name=”SlideShow2″ src=”images/pic0001a.jpg” alt=”” border=”2″/>
</td>
</tr>
</table>
<!–CLOSE CONTENT–>
</div>
</body>
</html>