Rotate images

[Total: 0    Average: 0/5]

This shows how to have images rotate at a given rate.

Body Code:

<script>
var _images = new Array();
function addNewImage(_name) { _images[_images.length?_images.length:0] = new Image(); _images[_images.length-1].src=_name; }
addNewImage("http://www.js-examples.com/js/zero.gif");
addNewImage("http://www.js-examples.com/js/one.gif");
addNewImage("http://www.js-examples.com/js/two.gif");
addNewImage("http://www.js-examples.com/js/three.gif");
addNewImage("http://www.js-examples.com/js/four.gif");
addNewImage("http://www.js-examples.com/js/five.gif");
addNewImage("http://www.js-examples.com/js/six.gif");
addNewImage("http://www.js-examples.com/js/seven.gif");
addNewImage("http://www.js-examples.com/js/eight.gif");
addNewImage("http://www.js-examples.com/js/nine.gif");

var _h = " height=100 ";
var _w = " width=100 ";

var NUM_ROWS = 2;

var _out  = "<table align=center width=500>";
for (var i=0;i<NUM_ROWS;i++)
{
  _out += "<tr>";
  for (var j=0;j<(_images.length/NUM_ROWS);j++)
  {
    _out += "<td><img"+_h+_w+"src='http://www.js-examples.com/js/"+_images[(j+i*_images.length/NUM_ROWS)].src+"' name='myimage"+(j+i*_images.length/NUM_ROWS)+"'></td>";
  } // cols in row
  _out += "</tr>";
} // rows
_out += "</table>";
document.write(_out);

var LOCATION=0; // first place to start from. (zero on zero)
var LOOPED_COUNT=0;
function looped()
{
  LOOPED_COUNT++;
  LOOPED_COUNT%=99; // base 10 2 digits
  var _digit_10 = parseInt(LOOPED_COUNT / 10); // integer divide
  var _digit_1  = LOOPED_COUNT % 10;
  document.cd2.src=_images[_digit_10].src;
  document.cd1.src=_images[_digit_1].src;
}

function rotateImages(_direction)
{
  LOCATION += _direction>0?1:-1;
  if (LOCATION <= 0) {LOCATION=_images.length-1;looped();}
  if (LOCATION >= _images.length) {LOCATION=0;looped();}
  for(var _i=0;_i<_images.length;_i++)
  {
	var _x = (LOCATION+_i)%_images.length;
	eval("document.myimage"+_i+".src=_images["+_x+"].src");
  }
}

var timer=null;
function stopAutoRotate()
{
  if(timer!=null)
  {
    clearInterval(timer);
	timer=null;
  }
}
var INTERVAL = 1000; // 1 second = 1000 milliseconds.
function startAutoRotate(_d)
{
  stopAutoRotate();
  if (_d > 0 )
    timer=setInterval('rotateImages(+1)',INTERVAL);
  else
    timer=setInterval('rotateImages(-1)',INTERVAL);
}
</script>
<a href='javascript:rotateImages(+1)'>add 1</a> | 
<a href='javascript:rotateImages(-1)'>sub 1</a> | 
<a href='javascript:startAutoRotate(+1)'>start auto rotate +1</a> |
<a href='javascript:startAutoRotate(+1)'>start auto rotate -1</a>
<p align="center">&nbsp;</p>
<p align="center">Numbers have looped</p>
<div align="center">
  <table width="200" border="0" cellspacing="0" cellpadding="0">
    <tr> 
      <td><img src="http://www.js-examples.com/js/zero.gif" name="cd2" width="100" height="100"></td>
      <td><img src="http://www.js-examples.com/js/zero.gif" name="cd1" width="100" height="100"></td>
    </tr>
  </table>
</div>
<p align="center">Times</p>

Times Viewed: 3

Leave a Reply

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