SlideShow – User Enters Forward or Backward

[Total: 0    Average: 0/5]

This shows how to have an HTML file use javascript to rotate through a selection of pictures on the event of a form button being selected to go forward or backward.

Body Code:

<form>
<center>
<script type=text/javascript>
var current = 0;
var myPics = new Array();
function addPic(_p) {
  myPics[myPics.length?myPics.length:0] = new Image();
  myPics[myPics.length-1].src=_p;
}

addPic("http://www.js-examples.com/js/pic1.gif");
addPic("http://www.js-examples.com/js/pic2.gif");

function checkIt(val) {
  current = Math.abs((current+parseInt(val))%myPics.length);
  document.myimg.src = myPics[current].src;
}

</script>
<br><input type=button value="-" onclick="checkIt(-1)">
<script type=text/javascript>
document.write("<img name=myimg alt='' src='"+myPics[current].src+"'>");
</script>
<input type=button value="+" onclick="checkIt(1)">
</center>
</form>

Times Viewed: 5

Leave a Reply

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