Landing page images change with mouse move

Question

I am trying to create a ripple effect on mouse moves using images. I have the below code but I need the ripples to be in sequence instead of random images which breaks the ripple effect. Any help would be appreciated. I actually have 100 images and not only 10

 jQuery(document).ready(function($){
  var images = [
    "https://spydrone.co.za/bibo/assets/ezgif-frame-100.jpg",
    "https://spydrone.co.za/bibo/assets/ezgif-frame-099.jpg",
    "https://spydrone.co.za/bibo/assets/ezgif-frame-098.jpg",
      "https://spydrone.co.za/bibo/assets/ezgif-frame-097.jpg",
    "https://spydrone.co.za/bibo/assets/ezgif-frame-096.jpg",
    "https://spydrone.co.za/bibo/assets/ezgif-frame-095.jpg",
      "https://spydrone.co.za/bibo/assets/ezgif-frame-094.jpg",
    "https://spydrone.co.za/bibo/assets/ezgif-frame-093.jpg",
    "https://spydrone.co.za/bibo/assets/ezgif-frame-092.jpg",
      "https://spydrone.co.za/bibo/assets/ezgif-frame-091.jpg",
    "https://spydrone.co.za/bibo/assets/ezgif-frame-090.jpg",
          ];
 var currentX = 0, currentY = 0;
  $('.header-image-inner').mousemove(function(e){
    if(Math.abs(currentX-e.pageX) > 50 || Math.abs(currentY-e.pageY) > 50){
        currentX = e.pageX;
        currentY = e.pageY;
        $('.header-image-inner img').attr('src',images[Math.floor(Math.random()*images.length)]);
    }
  })

})