when clicking on an image next image comes and this process repeat

<img id="myImg" src="img_chania.jpg" alt="Flowers in Chania" width="460" height="345">

<script>
var myImage = document.getElementById("myImg");
var imageArray = ["img_chania.jpg", "img_chania2.jpg", "img_flower.jpg", "img_flower2.jpg", "img_flower3.jpg"];
var imageIndex = 0;

function changeImage () {
    myImage.setAttribute("src", imageArray[imageIndex]);
    imageIndex++;
    if (imageIndex >= imageArray.length) {
        imageIndex = 0;
    }
}

var intervalHandle = setInterval(changeImage, 1000);

myImage.onclick =  function () {
    clearInterval(intervalHandle);
}
</script>