You can try hooking mousehold in this way:
- in mouseDown event function set an interval and immediately execute it; inside the interval make the prev/next action
- in
window.onmouseup
event function clear the interval
Consider to remove inline event bindings..
HTML:
<a href="#" onMousedown="next(); return false;">Next</a>
<a href="#" onMousedown="previous(); return false;">Back</a>
<img id="gallery" src="http://placehold.it/350x150" style="height:420px;width:744px">
Code:
var imageGallery = [
"http://placehold.it/350x150",
"http://placehold.it/350x250",
"http://placehold.it/350x350",
"http://placehold.it/350x450"];
var imgCount = 0;
var totalImgs = imageGallery.length - 1;
var timer;
function next() {
timer = setInterval(function fn() {
imgCount++;
if (imgCount > totalImgs) imgCount = 0
document.getElementById("gallery").src = imageGallery[imgCount];
return fn;
}(), 500)
}
function previous() {
timer = setInterval(function fn() {
console.log('prev')
imgCount--;
if (imgCount < 0) imgCount = totalImgs;
document.getElementById("gallery").src = imageGallery[imgCount];
return fn;
}(), 500)
}
function stopInterval() {
clearInterval(timer)
}
window.onmouseup = stopInterval;