New landing page background image on each refresh/new page load?

OK i have taken a slightly different approach, ive created a slider and added various images to it, then have removed the navigational objects away so it just looks like an image. Now I need to work out how to set up the ‘randomised’ selection for the images on loading.

Using this page I have got the below code, but it doesnt seem to be working for me…

<script>
  $(".hero-mask").append($(".mask").children().sort(function () {
    return Math.random() - 0.5;
}));
</script>

Any additional help would be really appreciated !!