Rotate Images or Banners

[Total: 0    Average: 0/5]

This will show several images rotating pictures.

Head Code:

<script> 
var slideShowSpeed = 5000; /* 5 seconds */
var crossFadeDuration = 3; /* Duration of crossfade (seconds) */

var _SHOW=0;
var _ITEM=0;
var Pic = new Array();
Pic[_SHOW]=new Array(); /* for slide spot 0 */
Pic[_SHOW][_ITEM++] = "http://www.js-x.com/js/pic1.gif";
Pic[_SHOW][_ITEM++] = "http://www.js-x.com/js/pic2.gif";

_SHOW++;_ITEM=0; /* (re)set counters for next slide show */

Pic[_SHOW]=new Array(); /* for slide spot 1 */
Pic[_SHOW][_ITEM++] = "http://www.js-x.com/js/pic3.gif";
Pic[_SHOW][_ITEM++] = "http://www.js-x.com/js/pic4.gif";

_SHOW++;_ITEM=0; /* (re)set counters for next slide show */

Pic[_SHOW]=new Array(); /* for slide spot 2 */
Pic[_SHOW][_ITEM++] = "http://www.js-x.com/js/pic1.gif";
Pic[_SHOW][_ITEM++] = "http://www.js-x.com/js/pic3.gif";

_SHOW++;_ITEM=0; /* (re)set counters for next slide show */

Pic[_SHOW]=new Array(); /* for slide spot 3 */
Pic[_SHOW][_ITEM++] = "http://www.js-x.com/js/pic2.gif";
Pic[_SHOW][_ITEM++] = "http://www.js-x.com/js/pic4.gif";

var t = new Array(); /* set up in init() */
var j = new Array(); /* set up in init() */
var preLoad = new Array();

function init_ex()
{
  for (var i=0;i<Pic.length;i++)
  {
    j[i]=0;
	t[i]=null;
    preLoad[i]=new Array();
    for(var r=0;r<Pic[i].length;r++)
    {
      preLoad[i][r] = new Image();
      preLoad[i][r].src = Pic[i][r];
    }
  } 
}
init_ex();
function startShow(_n)
{
  if(t[_n])
  {
    clearInterval(t[_n]);
	t[_n]=null;
  }
  t[_n]=setInterval('runSlideShow('+_n+')',slideShowSpeed);
}
function runSlideShow(_n){ 
  if (document.all){ 
      document.images["SlideShow"+_n].style.filter="blendTrans(duration=2)";
      document.images["SlideShow"+_n].style.filter="blendTrans(duration=crossFadeDuration)";
      document.images["SlideShow"+_n].filters.blendTrans.Apply();
  }
  document.images["SlideShow"+_n].src = preLoad[_n][j[_n]].src;
  if (document.all){document.images["SlideShow"+_n].filters.blendTrans.Play(); } 
  j[_n] = j[_n] + 1;
  if (j[_n] > (Pic[_n].length-1)) j[_n]=0;
} 
function bodyOnload()
{
  for(var i=0;i<Pic.length;i++)
  {
    /* this starts each one at a separated interval */
    setTimeout('startShow('+i+')',slideShowSpeed*i/Pic.length);
    /* use this if you want them to all change at the "same time" */
	/* "same time" on a single processing machine ? :_) */
	// startShow(i);
  }
}
</script>

Body Code:

<a href="javascript:bodyOnload();">click to start</a>
<table> 
<tr> 
<td><img src="http://www.js-x.com/js/pic1.gif" name='SlideShow0' width=50></td> 
</tr> 
</table> 

<table> 
<tr> 
<td> <img src="http://www.js-x.com/js/pic3.gif" name='SlideShow1' width=50></td> 
</tr>
</table> 

<table> 
<tr> 
<td><img src="http://www.js-x.com/js/pic1.gif" name='SlideShow2' width=50></td> 
</tr> 
</table> 

<table> 
<tr> 
<td> <img src="http://www.js-x.com/js/pic2.gif" name='SlideShow3' width=50></td> 
</tr>
</table> 

Times Viewed: 18

Leave a Reply

Your email address will not be published. Required fields are marked *