Changing CSS URL for pointer cursor (using Javascr

I asked a question yesterday here about having a cursor that changes regularly using javascript, to make it look animated. I got a great answer (Thank you Shiva!). I've now been trying to get two different 'animated' cursors, one for the 'auto' cursor, and a different one for the 'pointer' cursor.

I tried it lots of different ways, but just can't work it out (I must admit, I'm completely new to this - trying to improve). Here's one of the ways I tried to do it:

<!DOCTYPE html>
<html>
<head>

<script type = "text/javascript">   
var images = [
'assets/shared/cursors/drum1.cur',
'assets/shared/cursors/drum2.cur',
'assets/shared/cursors/drum3.cur',
'assets/shared/cursors/drum4.cur'
];

var x = 0;

function displayNextImage() {
x = (x === images.length - 1) ? 0 : x + 1;
document.body.style.cursor = 'url("' + images[x] + '"), default';
} 

setInterval(displayNextImage, 250);
</script>

<script type = "text/javascript">   
var images = [
'assets/shared/cursors/point1.cur',
'assets/shared/cursors/point2.cur',
'assets/shared/cursors/point3.cur',
'assets/shared/cursors/point4.cur'
];

var x = 0;

function displayNextImage() {
x = (x === images.length - 1) ? 0 : x + 1;
document.body.style.cursor:pointer = 'url("' + images[x] + '"), default';
} 

setInterval(displayNextImage, 250);
</script>

<body>

<div style="height: 1000vh; width: 1000vw;"></div>
</body>
</html>
</head>
</html>

If possible I'd like to do it without jQuery.

Again, any help is really appreciated.

Thanks! :)

You can try using jQuery for this :

var images = [
  'assets/shared/cursors/point1.cur',
  'assets/shared/cursors/point2.cur',
  'assets/shared/cursors/point3.cur',
  'assets/shared/cursors/point4.cur'
];

var x = 0;

function changeLinkCursorHoverBinding(){
  $("a").hover(function(){/*this is the mouseenter triggered function*/
    $(this).css("cursor",'url("' + images[x] + '"), default');
  }, function(){
    //handle mouseleave here if needed
  });

  x = (x === images.length - 1) ? 0 : x + 1;//put at the end to start at 0

  setTimeout(changeLinkCursorHoverBinding, 250);
}

$(document).ready(changeLinkCursorHoverBinding);//initial call of the function

EDIT

Or without jQuery :

var images = [
  'assets/shared/cursors/point1.cur',
  'assets/shared/cursors/point2.cur',
  'assets/shared/cursors/point3.cur',
  'assets/shared/cursors/point4.cur'
];

var x = 0;

function changeLinkCursorHoverBinding(){
 var elems = document.querySelectorAll("a");
 elems.removeEventListener("mouseenter", onHover);
 elems.removeEventListener("mouseleave", offHover);

 elems.addEventListener("mouseenter", onHover);
 elems.addEventListener("mouseleave", offHover);

 x = (x === images.length - 1) ? 0 : x+1;

 setTimeout(changeLinkCursorHoverBinding, 250);
}

function onHover(){
  var elems = document.querySelectorAll("a");
  for(e in elems){
    e.style.cursor = "url('" + images[x] + "'), default";
  }//you can use the regular for loop here if you wanna
}

function offHover(){
  var elems = document.querySelectorAll("a");
  for(e in elems){
    /*handle mouseleave here*/
  }
}

I had to name EH functions (and remove EH each call) because I wasn't sure that addEventListener overrides same handler if called again.

EDIT

for non jQuery way, you need to add onload="changeLinkCursorHoverBinding()" on your <body> tag this way : <body onload="changeLinkCursorHoverBinding()"> (the initial call after page's load).