I have a navigation feature on my website that allows me to cycle through images using the following code:
<a href="JavaScript:previousImage()">Previous</a> | <a href="JavaScript:nextImage()">Next</a>
<span id='num'></span>The actual image codes are included below. While the Previous / Next links function properly, I would like to implement a feature where users can click directly on an image to navigate to the next one in sequence. For example, clicking on "1.jpg" should take the user to "2.jpg", and so on. Once "5.jpg" is clicked, it should loop back to "1.jpg". Any guidance on how to achieve this would be greatly appreciated. As a beginner building my site independently, any assistance is invaluable.
<script type="text/javascript">
var image = new Array("jpegs/1.jpg",
"jpegs/2.jpg",
"jpegs/3.jpg",
"jpegs/4.jpg",
"jpegs/5.jpg"
)
var imgNumber=1
var numberOfImg = image.length
function previousImage(){
if(imgNumber > 1){
imgNumber--
}
else{
imgNumber = numberOfImg
}
document.slideImage.src = image[imgNumber-1]
}
function nextImage(){
if(imgNumber < numberOfImg){
imgNumber++
}
else{
imgNumber = 1
}
document.slideImage.src = image[imgNumber-1]
}
</script>