Image Viewer

[Total: 0    Average: 0/5]

This shows how to have a HTML document rotate (slide-show) through a set of pictures.

Head Code:

<script>
var path="/images/"; /* path to the images */
var isIE=document.all?true:false;
var isNS4=document.layers?true:false;
var isNS6=!isIE&&document.getElementById?true:false;
var n=0;
var imgs = new Array();
var PRELOAD=true; /* preload images or not */
var c=0; /* used to load images in any order you specify and only change the image name */
if(!PRELOAD)
{
  imgs[c++] = path+"blue_ball0.gif";
  imgs[c++] = path+"red_ball0.gif";
  imgs[c++] = path+"green_ball0.gif";
  imgs[c++] = path+"yellow_ball0.gif";
}
else
{
  imgs[c] = new Image();imgs[c++].src=path+"blue_ball0.gif";
  imgs[c] = new Image();imgs[c++].src=path+"red_ball0.gif";
  imgs[c] = new Image();imgs[c++].src=path+"green_ball0.gif";
  imgs[c] = new Image();imgs[c++].src=path+"yellow_ball0.gif";
}
function rotate()
{
  var _setTo=PRELOAD?imgs[n].src:imgs[n];
  if(isIE)document.images["p"].src=_setTo;
  if(isNS4)document.f.p.src=_setTo;
  if(isNS6)document.f.p.src=_setTo;
  (n==(imgs.length-1))?n=0:n++;
}
</SCRIPT> 

Body Code:

<FORM NAME="f">
<IMG NAME="p" SRC="/js/pic1.gif" WIDTH="50" HEIGHT="50" ALT="Slide">
</FORM>
Wait 3 seconds and the image should change.
<script>
setInterval("rotate();",5000);
</script>

Times Viewed: 1

Leave a Reply

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