Currently closee to finishing a slideshow using html and JavaScript. My last problem is creating stop button which needs to use a return function (I assume) Or some sort of exit function. It is an image slideshow that runs automatically, can be paused, skip image, go back an image and so on. I'd like the stop button to kill the autoRun function and set the image back to the first default image. I've set up a function which I'm guessing is totally wrong as it is not working.
The HTML
<td class=controls>
<button onClick=autoRun()>Start</button>
<button onClick=changeImage(-1); return false;>Previous Image</button>
<button onClick=pause();>pause</button>
<button onClick=changeImage(1); return false;>Next Image</button>
<button onClick=Exit();>Exit</button>
</td>
</tr>
All buttons are working besides the last one
JavaScript
var images = [HGal0.jpg, HGal1.jpg, HGal2.jpg, HGal3.jpg, HGal4.jpg, HGal5.jpg, HGal6.jpg, HGal7.jpg, HGal8.jpg, HGal9.jpg, HGal10.jpg, HGal11.jpg, HGal12.jpg, HGal13.jpg, HGal14.jpg, HGal15.jpg];
var interval = setInterval(changeImage(1), 2000);
var imageNumber = 0;
var imageLength = images.length - 1;
function changeImage(x) {
imageNumber += x;
// if array has reached end, starts over
if (imageNumber > imageLength) {
imageNumber = 0;
}
if (imageNumber < 0) {
imageNumber = imageLength;
}
document.getElementById(slideshow).src = images[imageNumber];
return false;
}
function autoRun() {
interval = setInterval(changeImage(1), 2000);
}
function pause(){
clearInterval(interval);
interval = null;
}
function Exit(){
return;
}
I'm not fully understanding the return statement in the Exit function, as most examples I've looked at run the function when an 'if' statement is met, whereas I'd like mine to execute when the Stop button is clicked. Thanks