Image Slideshow

images and media 1997 still works

Next and previous buttons stepping through a set of photos.

In 2026: Works. Preloading matters here for the same reason it does on rollovers.

Where it came from: Free script archives, roughly 1998. Later a Dreamweaver behavior. MDN ↗

<img id="slide" border="3"
     src="https://xbawx.com/btn/assets/7c/7cada91ec2730b0fb58b60bab3f16e67985dd27b.gif"><br>
<button onclick="step(-1)">&laquo; Previous</button>
<span id="slideNum">1 of 4</span>
<button onclick="step(1)">Next &raquo;</button>

<script language="JavaScript">
var slides = [
  "https://xbawx.com/btn/assets/7c/7cada91ec2730b0fb58b60bab3f16e67985dd27b.gif",
  "https://xbawx.com/btn/assets/cd/cd5e5da0a6c7a9bb95bb3ce5a919aea7c39f50b0.gif",
  "https://xbawx.com/btn/assets/d7/d7e43e74e65cea13f9566328dc82277862763030.gif",
  "https://xbawx.com/btn/assets/d3/d37aa48fdebf21f4f35faabc4e983573b2553fbe.gif"
];
var si = 0;
for (var i = 0; i < slides.length; i++) { var p = new Image(); p.src = slides[i]; }
function step(n) {
  si = (si + n + slides.length) % slides.length;
  document.getElementById("slide").src = slides[si];
  document.getElementById("slideNum").innerHTML = (si + 1) + " of " + slides.length;
}
</script>

sandboxed demo · breaks nothing but itselfrestart

More in images and media