JavaScript gallery with mouse hold loop

Question

JavaScript gallery with mouse hold loop

812 Views Asked by coddr At 12 April 2025 at 15:46

So i got this gallery script and it works fine , but im trying to import onMousedown function ,so when i click and hold the 'next' or 'previous' links , images just keep changing in a loop ,until i release the link

<html>

<head>

<script type='text/javascript'>


var imageGallery = [
"img1.jpg" ,       
"img2.jpg" ,
"img3.jpg",
"img4.jpg"
];

var imgCount = 0;
var totalImgs = imageGallery.length - 1;

function next() {
imgCount++ ;
if(imgCount > totalImgs) imgCount = 0

document.getElementById("gallery").src = imageGallery[imgCount] ;
}

function previous() {
imgCount--;
if(imgCount < 0) imgCount = totalImgs ;
document.getElementById("gallery").src = imageGallery[imgCount] ;    
} 

</script>   

</head>

<body>

<a href="#" onMousedown="next(); return false;">Next</a>
<a href="#" onMousedown="previous(); return false;">Back</a>
<img id="gallery"src="img1.jpg"style="height:420px;width:744px">   

</body>

</html>

Original Q&A

There are 1 best solutions below

**Irvin Dominin** · Accepted Answer

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;

Demo: http://jsfiddle.net/T42jj/

JavaScript gallery with mouse hold loop

There are 1 best solutions below

Related Questions in JAVASCRIPT

Related Questions in ONMOUSEDOWN

Trending Questions

Popular # Hahtags

Popular Questions